I'm currently trying to implement some custom cursor - a div that moves with the cursor. To do so, I use the following code:

document.addEventListener('mousemove', this.handleMouseMove);

handleMouseMove = (event) => {
    const y = event.pageY;
    const x = event.pageX;

    const ref = document.querySelector('.follow-cursor');
    ref.style.left = x + 'px';
    ref.style.top = y + 'px';
};

It works fine, but there's one more problem: scrolling. So far, the div is not moving on scroll and hence not following the cursor on scroll. How can I change that? Reference: this website.

I'm currently trying to implement some custom cursor - a div that moves with the cursor. To do so, I use the following code:

document.addEventListener('mousemove', this.handleMouseMove);

handleMouseMove = (event) => {
    const y = event.pageY;
    const x = event.pageX;

    const ref = document.querySelector('.follow-cursor');
    ref.style.left = x + 'px';
    ref.style.top = y + 'px';
};

It works fine, but there's one more problem: scrolling. So far, the div is not moving on scroll and hence not following the cursor on scroll. How can I change that? Reference: this website.

• javascript
• html

Share Improve this question Follow edited Mar 22, 2020 at 22:23 Tom asked Mar 22, 2020 at 21:59 TomTom 4,06366 gold badges2626 silver badges6363 bronze badges 4

• can you please provide a working example? – Samet Conrad Commented Mar 22, 2020 at 22:15
• @SametC the link is a working example, but having a look at the non-functional code OP has would be good – NickSlash Commented Mar 22, 2020 at 22:16
• yes its an example for what he will do, but yes the non-functional code would be great. You are right. – Samet Conrad Commented Mar 22, 2020 at 22:18
• @SametC That's all I have so far, I didn't figure a way yet to include scrolling. – Tom Commented Mar 22, 2020 at 22:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

I don't think this is how the site you linked to does this, but it works.

handleMouseMove = (event) => {
    const y = event.pageY;
    const x = event.pageX;
    const ref = document.querySelector('.follow-cursor')
    const scrollLeft = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
    const scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
    ref.style.left =  x - scrollLeft + 'px';
    ref.style.top = y - scrollTop + 'px';
};

If you apply style position: fixed to your .follow-cursor it should work.

example: https://jsfiddle/bf5wy9v3/

Yeah NickSlash's answer works fine. You can try both. Just in this case do not forget to add the id in the html

const cursor = document.getElementById("cursor")
const moveCursor = (event) => {
  const y = event.pageY
  const x = event.pageX
  const scrollLeft =
window.pageXOffset !== undefined
  ? window.pageXOffset
  : (document.documentElement || document.body.parentNode || document.body)
      .scrollLeft
onst scrollTop =
window.pageYOffset !== undefined
  ? window.pageYOffset
  : (document.documentElement || document.body.parentNode || document.body)
      .scrollTop
cursor.style.left = x - scrollLeft + "px"
cursor.style.top = y - scrollTop + "px"`}`
document.addEventListener("mousemove", moveCursor)