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

问题描述

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

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

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

当滚动方向为水平时，有没有办法在滚动时更新鼠标位置。

解决方法

我刚刚根据我的情况想出了这一点，我认为这与您的情况相似。不确定这是否有帮助 - 希望有帮助。

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

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