Why custom cursor disappears when scrolling

Question

I am using this custom cursor in my react project:

Cursor.js

import React from "react";
import "./Cursor.scss";

function Cursor() {
  return (
    <div>
      <h4 class="cursor"></h4>
    </div>
  );
}

export default Cursor;

Cursor.scss:

@import "/src/Utilities/Varibles.scss";

*{
   cursor: none;
 }
 
 .cursor {
   position: absolute;
   width: 40px;
   height: 40px;
   background: $green;
   border-radius: 50%;
   top: var(--y, 0);
   left: var(--x, 0);
   transform: translate(-50%, -100%);
   z-index: 2;
   mix-blend-mode: difference;
   pointer-events: none;
 }

and then I import it in my App.js

...
    
function App() {
    
      document.onmousemove = function(e) {
        document.body.style.setProperty('--x',(e.clientX)+'px');
        document.body.style.setProperty('--y',(e.clientY)+'px');
      }
      
      return (
...

But when I scroll more than the 100% of the viewport height, the cursor doesn't follow my mouse position. I don't really know how to make the cursor keep my mouse position while scrolling to the bottom of the page.

The App.js doesn't have any styles, the styles are on the index.scss:

@import "/src/Utilities/Varibles.scss";

html{
  scroll-behavior: smooth;
}

body {
  background-color: $blue;
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  display: flex;
  flex-direction: column;
  margin: 0 auto;

  &::-webkit-scrollbar {
    display: none;
  }
}

You can see whta happens here: https://marclopez.oddsolutionslab.com/

Does anyone know how to solve this?

do you have to make your custom mouse like this? do you really need to make a seperate component for it? — KyloDev, Apr 18 '23 at 20:56
ah, just noticed that you have a blending mode on it.. so i guess the answer to my previous question is a yes. what you'll have to do to fix this is get the scroll offset of your page on the Y axis. here's a post i found on SO. [link](https://stackoverflow.com/questions/4096863/how-to-get-and-set-the-current-web-page-scroll-position) — KyloDev, Apr 18 '23 at 21:10
I'm stupid hahaha, the problem was that what I was calling in App.js needs to be on the Cursor.js file, what I had, only was called when the page loaded and it took window's initial scroll position, thank you anyway, I learned about the page offset while looking for an answer ;) — Marc López Soler, Apr 18 '23 at 21:33
nothing, it works only when I load the page the first time, when I navigate, it stops working, will keep searching — Marc López Soler, Apr 18 '23 at 21:43

Marc López Soler · Accepted Answer · 2023-04-18T21:52:44.267

Solution:

I figured out what I was doing wrong, what I added on the App.js needs to be on Cursor.js, deleted the document. before the onmousemove and added pageYoffset to the mouseY position

The Cursor.js file should look like this

import React from "react";
import "./Cursor.scss";

function Cursor() {

  onmousemove = function (e) {
    console.log("mouse location:", e.clientX, e.clientY+this.window.pageYOffset);
    document.body.style.setProperty('--x',e.clientX+'px');
    document.body.style.setProperty('--y',e.clientY+this.window.pageYOffset+'px');
  
  };

  return (
    <div>
      <h4 class="cursor"></h4>
    </div>
  );
}

export default Cursor;

Thanks KyloDev for the help!!

Why custom cursor disappears when scrolling

1 Answers1