javascript - 滚动时光标替换脚本中断

Question

我发现了一个小光标替换脚本，看起来很奇怪，并且在全屏页面上运行得非常好。我在我的 WordPress 网站上实现了它，但我意识到，当我在必须滚动的页面上时，我的光标图像不会保持附加到我的实际指针所在的位置。滚动不会将光标的位置更新为鼠标指针。

我尝试为 onscroll 添加一个事件监听器，以在滚动时更新光标的位置，但它似乎没有执行任何操作。我还尝试将光标 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