0

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

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

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

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

4

1 回答 1

2

我只是根据我的情况弄清楚了这一点，我认为这与您的情况相似。不确定这是否会有所帮助 - 希望它会有所帮助。

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

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

于 2021-01-25T18:30:13.343 回答