滚动页面时光标跟随效果无法随页面下移问题求助

你的推测完全正确：e.clientX和e.clientY是相对于浏览器视口的坐标，不会包含页面滚动的偏移量，导致页面滚动后，光标元素的定位和实际鼠标位置脱节。

解决方案 #

将clientX/clientY替换为pageX/pageY——这两个属性是相对于整个文档的坐标，会自动计算页面滚动的偏移量。同时优化事件监听的绑定方式，避免内存泄漏：

const Layout = ({children}) => {

  const [x, setX] = useState(0);
  const [y, setY] = useState(0);

  useLayoutEffect(() => {
    const handleMouseMove = (event) => {
      setX(event.pageX);
      setY(event.pageY);
    };
    // 使用addEventListener绑定事件
    document.addEventListener('mousemove', handleMouseMove);
    // 组件卸载时移除监听
    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
    };
  }, []); // 空依赖确保仅挂载时绑定一次

  return (
    <div className={styles.layout}>
      <div style={{top: y - 14, left: x - 14}} className={styles.cursor} />
      <Header />
      {children}
      <Footer />
    </div>
  )
}

关键说明 #

• pageX/pageY：相对于文档左上角的坐标，不管页面怎么滚动，都能准确对应鼠标在文档中的实际位置。
• 事件监听优化：用addEventListener替代直接赋值document.onmousemove，避免覆盖其他可能存在的鼠标移动事件；同时在effect的返回函数中移除监听，防止组件卸载后残留事件导致内存泄漏。
• 空依赖数组：确保useLayoutEffect只在组件挂载时执行一次，不会重复绑定事件。

CSS部分无需修改，保持原样式即可。

内容的提问来源于stack exchange，提问作者Tom Walsh