由于水平滚动 (LocomotiveScroll)，无法更新我的鼠标位置

Question

我正在尝试使用 Ricardo Mendieta 的 Ink Cursor 制作自定义光标。 https://codepen.io/mendieta/pen/WgvENJ

光标工作正常，但我遇到的问题是我使用 horizontal 滚动条和 Locomotive Scroll。当我滚动时，鼠标位置不会更新。我试图用鼠标滚轮功能解决这个问题。我可以控制台记录鼠标滚轮事件，但它不会更新我的鼠标位置。

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

有什么方法可以在水平滚动时更新鼠标位置

Answer 1

我是根据我的情况想出来的，我觉得和你的差不多。不确定这是否有帮助 - 希望有帮助。

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

因此，我没有尝试重新配置鼠标位置，而是简单地更新了自定义光标的“左”属性，使其与水平布局的机车滚动容器的滚动量同步。

由于水平滚动 (LocomotiveScroll)，无法更新我的鼠标位置

Can't update my mouse position, because of my horizontal scroll (LocomotiveScroll)

javascript

scroll

horizontal-scrolling

locomotive-scroll