如何在网页中垂直滚动后使元素跟随光标

Question

当我向下滚动网页时，我试图让一个HTML元素跟随我的鼠标光标，但当我向下滑动时，HTML元素会"错位"。我得到的印象是，这是由于我的光标的新x，y位置，但我不知道如何从这里开始。

代码-HTML:

<div id="mouseOverElement">
<h3 id="mouseOverText">
test text
</h3>
</div>

代码-JavaScript:

let root = document.documentElement;
root.addEventListener("mousemove", e =>
{
root.style.setProperty('--mouse-x', e.clientX + "px");
root.style.setProperty('--mouse-y', e.clientY + "px");
});

代码-CSS:

#mouseOverElement 
{
width: 200px;
height: 100px;
background: rgb(0, 0, 0);
position: absolute;
color: white;
left: var(--mouse-x);
top: var(--mouse-y);
}

Answer 1

您必须考虑滚动y的位置。window.scrollY + e.clientY起作用。

let root = document.documentElement;
root.addEventListener("mousemove", e => {
root.style.setProperty('--mouse-x', e.clientX + "px");
root.style.setProperty('--mouse-y', window.scrollY + e.clientY + "px");
});

#mouseOverElement {
width: 200px;
height: 100px;
background: rgb(0, 0, 0);
position: absolute;
color: white;
left: var(--mouse-x);
top: var(--mouse-y);
}
html, body{
height:200%;
}

<div id="mouseOverElement">
<h3 id="mouseOverText">
test text
</h3>
</div>

为了在滚动时更新位置，我们还可以为scroll:添加一个事件侦听器

let root = document.documentElement;
root.addEventListener("mousemove", e => {
root.style.setProperty('--mouse-x', e.clientX + "px");
root.style.setProperty('--mouse-y', window.scrollY + e.clientY + "px");
});
document.body.addEventListener("scroll", e => {
root.style.setProperty('--mouse-x', e.clientX + "px");
root.style.setProperty('--mouse-y', window.scrollY + e.clientY + "px");
});

#mouseOverElement {
width: 200px;
height: 100px;
background: rgb(0, 0, 0);
position: absolute;
color: white;
left: var(--mouse-x);
top: var(--mouse-y);
}
html, body{
height:200%;
}

<div id="mouseOverElement">
<h3 id="mouseOverText">
test text
</h3>
</div>