React.JS - Custom Cursor not following with scroll

Question

This is my first question on stackoverflow, I'm a junior front-end developper and I'm struggling with a custom cursor for my portfolio.

The problem I'm facing is that the custom cursor is not following the mouse when I'm scrolling.

This is what I did for the onMouseMove and it work very well :

<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;`);
  };

Now to handle the scroll issue I put an event listener on scroll :

window.addEventListener('scroll', mousePositionWithScroll);

And I've tried to write a function to update the cursor position but without sucess. This is my last attempt :

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;`);
  };

I've tried to use the state to handle this, It worked in a way but I had some serious performance issue. I tried to use window.pageYOffset and window.pageXOffset but didn't really work.

This is all my app component :

// == 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;

Do you have an idea to handle this issues ?

Can you put your code in a codesandbox so we can view it?

klaurtar1
– klaurtar1

2022-07-08 15:50:29 +00:00
Commented Jul 8, 2022 at 15:50 — klaurtar1
– klaurtar1, Commented Jul 8, 2022 at 15:50

David Poulain · Accepted Answer · 2022-07-08 18:56:27Z

1

Okay, I found a solution. I switched the custom cursor position from absolute to fixed and then had to delete the window.pageYOffset from this line : `

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

It works perfectly fine now.

answered Jul 8, 2022 at 18:56

David Poulain

112 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React.JS - Custom Cursor not following with scroll

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related