React.JS - 自定義光標不跟隨滾動

Question

這是我關於 stackoverflow 的第一個問題，我是一名初級前端開發人員，我正在為我的投資組合使用自定義光標而苦苦掙扎。

我面臨的問題是自定義光標在我滾動時沒有跟隨鼠標。

這就是我為 onMouseMove 所做的，效果很好：

<div onMouseMove={mousePosition} onMouseLeave={hideCursor} onMouseEnter={showCursor} className="app">

const mousePosition = event => {
    cursor.current.setAttribute('style', `top:${event.clientY + window.pageYOffset - 15}px; left:${event.clientX - 15}px;`);
  };

現在為了處理滾動問題，我在 scroll 上放置了一個事件監聽器：

window.addEventListener('scroll', mousePositionWithScroll);

而且我嘗試編寫一個函數來更新光標位置但沒有成功。 這是我最后一次嘗試：

const mousePositionWithScroll = event => {
    const cursorPositionTop = parseInt(cursor.current.style.top, 10);
    const cursorPositionLeft = parseInt(cursor.current.style.left, 10);
    const windowY = window.pageYOffset;
    const windowX = window.pageXOffset;
    const scrollCursorPositionTop = cursorPositionTop + windowY;
    const scrollCursorPositionLeft = cursorPositionLeft + windowX;
    cursor.current.setAttribute('style', `top:${scrollCursorPositionTop - 15}px; left:${scrollCursorPositionLeft - 15}px;`);
  };

我試圖使用狀態來處理這個問題，它在某種程度上起作用，但我遇到了一些嚴重的性能問題。 我嘗試使用 window.pageYOffset 和 window.pageXOffset 但並沒有真正起作用。

這是我所有的應用程序組件：

// == Import
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { hideCustomCursor, showCustomCursor } from 'src/actions';

import Header from 'src/components/Header';
import Portfolio from 'src/components/Portfolio';
import MainTitile from 'src/components/MainTitle';
import TopButton from 'src/components/TopButton';
import ServicesSkill from 'src/components/ServicesSkill';
import About from 'src/components/About';
import Contact from 'src/components/Contact';
import CustomCursor from 'src/components/CustomCursor';

import './styles.scss';

// == Composant
function App() {
  const dispatch = useDispatch();
  const customCursorVisible = useSelector((state) => state.customCursorVisible);
  const cursor = React.createRef();
  const mousePosition = event => {
    cursor.current.setAttribute('style', `top:${event.clientY + window.pageYOffset - 15}px; left:${event.clientX - 15}px;`);
  };

  const mousePositionWithScroll = event => {
    const cursorPositionTop = parseInt(cursor.current.style.top, 10);
    const cursorPositionLeft = parseInt(cursor.current.style.left, 10);
    const windowY = window.pageYOffset;
    const windowX = window.pageXOffset;
    const scrollCursorPositionTop = cursorPositionTop + windowY;
    const scrollCursorPositionLeft = cursorPositionLeft + windowX;
    cursor.current.setAttribute('style', `top:${scrollCursorPositionTop - 15}px; left:${scrollCursorPositionLeft - 15}px;`);
  };

  const hideCursor = () => {
    dispatch(hideCustomCursor());
  };

  const showCursor = () => {
    dispatch(showCustomCursor());
  };

  window.addEventListener('scroll', mousePositionWithScroll);

  return (
    <div onMouseMove={mousePosition} onMouseLeave={hideCursor} onMouseEnter={showCursor} className="app">
      { customCursorVisible && (<CustomCursor ref={cursor} />)}
      <Header />
      <TopButton />
      <MainTitile />
      <ServicesSkill />
      <Portfolio />
      <About />
      <Contact />
    </div>
  );
}

// == Export
export default App;

你有處理這個問題的想法嗎？

Answer 1

好的，我找到了解決方案。 我將自定義光標位置從絕對切換到固定，然后不得不從該行刪除window.pageYOffset ：`

cursor.current.setAttribute('style', `top:${event.clientY + window.pageYOffset - 15}px; left:${event.clientX - 15}px;`);.

它現在工作得很好。