0

I've changed the cursor to a small circle and it works ok on the front page, where the height of body is 100vh. On the portfolio page, where there are more photos etc. the small circle comes until 100vh and then stops there. What would make it stop there? Any idea? When I start scrolling, it goes up and away from the actual cursor.

Thanks a lot in advance. The code is below.

.cursor__point {
    position: absolute;
    transform: translate(-50%,-60%);
    z-index: 3;
    pointer-events: none;
    z-index: 1000;
}


window.addEventListener("mousemove", (event) => {
  cursor.style.top = event.pageY + "px";
  cursor.style.left = event.pageX + "px";
});
Sura Rzayeva
  • 21
  • 6
  • @LawrenceCherone not really. According to https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageY it acounts for the scrolling. I've tested it just now in Chrome. – Don Foumare May 20 '20 at 18:30
  • your right https://playcode.io/608236/ – Lawrence Cherone May 20 '20 at 18:33
  • try `offsetY`/`offsetX` instead – Lawrence Cherone May 20 '20 at 18:38
  • I know this does not answers your question, but you could also use the cursor property instead, like [here](https://stackoverflow.com/questions/18551277/using-external-images-for-css-custom-cursors) – Don Foumare May 20 '20 at 18:40
  • for me it works fine... i think the issue is, that the cursors position isn't updated unless you move the mouse. so if you just scroll down without moving the mouse the cursor will eventually disappear at the top – Don Foumare May 20 '20 at 19:07

0 Answers0