光标跟随效果不会跟随用户滚动屏幕

Question

I have a cursor follow effect on my new landing page:
https://tiny-cendol-e90774.netlify.app/

For some reason when you scroll down the page, the cursor doesn't follow you down?

Here's the code below:

const Layout = ({children}) => {

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

  useLayoutEffect(() => {
    document.onmousemove = (event) => {
      var e = event;
      setX(e.clientX);
      setY(e.clientY);
    };
  });

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

And here's the styles:

.cursor {
  width: 30px;
  height: 30px;
  display: none;
  border-radius: 50%;
  position: absolute;
  border: 2px solid $white;
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);

  &:after {
    top: 50%;
    left: 50%;
    content: '';
    width: 5px;
    height: 5px;
    position: absolute;
    background-color: $white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  @media all and (min-width: $tablet) {
    display: block;
  }
}

I'm assuming that the e.clientX and e.clientY have no context of the browser dimensions, so aren't working on scroll.

Answer 1

You can use the event.pageX and event.pageY properties to obtain the mouse position from the page start.

const Layout = ({children}) => {

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

  useLayoutEffect(() => {
    document.onmousemove = (event) => {
      var e = event;
      setX(e.pageX);
      setY(e.pageY);
    };
  });

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

This will fix your issue, but it doesn't update the cursor while scrolling.

I'm not sure if you want to use useState for the purpose of moving a cursor on the screen. You can use a ref as well for this purpose. Also, don't forget to clear the event listener when the component un mounts (even when you never unmount the Layout component).

const Layout = ({ children }) => {
  const cursorRef = useRef();

  useLayoutEffect(() => {
    const handleMouseMove = (event) => {
      if (cursorRef.current) {
        cursorRef.current.style.top = `${event.pageY}px`;
        cursorRef.current.style.left = `${event.pageX}px`;
      }
    };

    window.addEventListener("mousemove", handleMouseMove);

    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
    };
  });

  return (
    <div className={styles.layout}>
      <div className="cursor" ref={cursorRef} />
      <Header />
      {children}
      <Footer />
    </div>
  )