Question

我目前正在尝试实现一些自定义游标-与游标一起移动的div。为此，我使用以下代码：

document.addEventListener('mousemove', this.handleMouseMove);

handleMouseMove = (event) => {
    const y = event.pageY;
    const x = event.pageX;

    const ref = document.querySelector('.follow-cursor');
    ref.style.left = x + 'px';
    ref.style.top = y + 'px';
};

它工作正常，但是还有一个问题：滚动。到目前为止， div不会在滚动上移动，因此不会跟随滚动上的光标。我该如何改变？参考：this website。

Answer 1

我不认为这是您链接到的网站的工作方式，但是它可以正常工作。

Failed to execute 'setItem' on 'Storage': Setting the value of 'myapp' exceeded the quota.

如果您将样式handleMouseMove = (event) => { const y = event.pageY; const x = event.pageX; const ref = document.querySelector('.follow-cursor') const scrollLeft = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft; const scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop; ref.style.left = x - scrollLeft + 'px'; ref.style.top = y - scrollTop + 'px'; };应用于.follow-cursor，它将起作用。

示例：https://jsfiddle.net/bf5wy9v3/

使div跟随滚动条上的光标进行鼠标移动

1 个答案: