0

I'm trying to make a custom cursor with the Ink Cursor by Ricardo Mendieta. https://codepen.io/mendieta/pen/WgvENJ

The cursor is working, but the problem I have is that I use a horizontal scroll with Locomotive Scroll. When I scroll, the mouse position doesn't get updated. I tried to fix this with a mousewheel function. I can console log the mousewheel event, but it doesn't update my mouse position.

window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mousewheel', onMouseScroll);

const onMouseMove = (event) => {
  mousePosition.x = event.clientX - width / 2;
  mousePosition.y = event.clientY - width / 2;
  resetIdleTimer();
};

const onMouseScroll = (event) => {
  console.log(event);
  mousePosition.x = event.clientX - width / 2;
  mousePosition.y = event.clientY - width / 2;
  resetIdleTimer();
};

const render = (timestamp) => {
  const delta = timestamp - lastFrame;
  positionCursor(delta);
  lastFrame = timestamp;
  requestAnimationFrame(render);
};

const positionCursor = (delta) => {
  let x = mousePosition.x;
  let y = mousePosition.y;
  dots.forEach((dot, index, dots) => {
    let nextDot = dots[index + 1] || dots[0];
    dot.x = x;
    dot.y = y;
    dot.draw(delta);
    if (!idle || index <= sineDots) {
      const dx = (nextDot.x - dot.x) * 0.35;
      const dy = (nextDot.y - dot.y) * 0.35;
      x += dx;
      y += dy;
    }
  });
};

Is there a way I can update the mouse position when I scroll when the scroll direction is horizontal.

xhienne
  • 5,738
  • 1
  • 15
  • 34
Sven Z
  • 183
  • 1
  • 10

1 Answers1

2

I just figured this out for my situation, which I think is similar to yours. Not sure if this will help or not - hopefully it does.

 scroll.on('scroll', (instance) => {
        let customCursor = document.querySelector(".customCursor");
        let scrollPx = instance.scroll.x + "px";
        customCursor.style.left = scrollPx;
    });

So instead of trying to reconfigure where the mouse position is, I'm simply updating the "left" attribute of the custom cursor to be in sync with how much the horizontally laid out Locomotive scroll container is being scrolled.

yerme
  • 810
  • 5
  • 15