滚动时光标替换脚本中断

Question

我发现了一个小的光标替换脚本，它看起来像kewl，在全屏页面上工作得很好。我在我的wordpress网站上实现了它，但我意识到当我在一个必须滚动的页面上时，我的光标图像不会停留在我的实际指针所在的位置。滚动不会将光标的位置更新为鼠标指针。

我尝试为onscroll添加一个eventlistener，以便在滚动时更新光标的位置，但它似乎没有任何作用。我还尝试将光标div放到另一个div中，并将该div的位置设置为粘滞，但这破坏了整个过程。

这里有两个链接，您可以在其中查看实际运行的脚本：

krauss.fr/about (在这个页面上可以正常工作) krauss.fr/works (在这个页面上不能)

下面是我的代码

function setCurrentCursorProps() {

// Apply translation (set to actual cursor position)
cursorEl.style.transform = `translate(${currentCursorPos.x}px, ${currentCursorPos.y}px)`;

// Ensure correct rotation transition direction
while (Math.abs(lastCursorAngle - cursorAngle) > 180) {
  if (cursorAngle > lastCursorAngle) {
    cursorAngle -= 360;
  } else if (cursorAngle < lastCursorAngle) {
    cursorAngle += 360;
  }
}

// Apply rotation
cursorImageEl.style.transform = `rotate(${cursorAngle - 90}deg)`;
}

function updateCursor() {
    window.addEventListener('mousemove', event => {
    currentCursorPos = { x: event.clientX, y: event.clientY };
    });
    window.addEventListener('onscroll', event => { //this is the code I added that doesn't work
    currentCursorPos = { x: event.clientX, y: event.clientY };
    }); 

// Interval for updating cursor-position
setInterval(setCurrentCursorProps, INTERVAL_POSITION);

// Interval for updating cursor-rotation
setInterval(() => {
const delt = {
x: lastCursorPos.x - currentCursorPos.x,
y: lastCursorPos.y - currentCursorPos.y };

if (Math.abs(delt.x) < 3 && Math.abs(delt.y) < 3) return;
cursorAngle = Math.atan2(delt.y, delt.x) * 180 / Math.PI;

setCurrentCursorProps();

lastCursorPos = currentCursorPos;
lastCursorAngle = cursorAngle;
}, INTERVAL_ROTATION);
}


return {

'initialize': () => {
   cursorEl = document.querySelector('#cursor');
  cursorImageEl = document.querySelector('#cursor > img');
  updateCursor();
} };

}();

document.addEventListener('DOMContentLoaded', rotatingCursor.initialize);

Answer 1

这是因为事件不是onscroll而是scroll

​

window.addEventListener('scroll', event => {
    alert("Nice scroll !")
});

div {
  height: 900px;
}

<div><div/>

​

你可以在这里找到更多信息：https://www.w3schools.com/jsref/event_onscroll.asp