跟随鼠标移动和滚动的元素

Question

我正在尝试编写一些 Vanilla Javascript 来使元素跟随我的鼠标移动。我使用了 clientX、clientY 和 mousemove 事件使其跟随，但是当我滚动页面时，元素不会随鼠标移动。我想也许我需要使用滚动事件，但我正在努力使它工作。任何帮助都会很棒，谢谢！

document.addEventListener('mousemove', (e) => {

    const mouseFollow = document.getElementById('mouse-follow');

    const x = e.clientX - 25; //-25 to center div over mouse

    const y = e.clientY - 25; 

    mouseFollow.style.top = `${y}px`;

    mouseFollow.style.left = `${x}px`;

})

Answer 1

使用position: fixed;. clientX/Y是相对于视口的，CSS 位置也是如此fixed。缓存您的选择器，无需在每次鼠标移动时查询 DOM 元素const mouseFollow = document.getElementById('mouse-follow');document.addEventListener('mousemove', (e) => {&nbsp; mouseFollow.style.cssText = `&nbsp; &nbsp; left: ${e.clientX - 25}px;&nbsp; &nbsp; top:&nbsp; ${e.clientY - 25}px;&nbsp; `;});body {&nbsp; height: 200vh;}#mouse-follow {&nbsp; position: fixed;&nbsp; left: 0;&nbsp; top:0;&nbsp; padding: 25px;&nbsp; background: red;}<div id="mouse-follow"></div>

Answer 2

我怀疑您缺少的是元素必须具有绝对位置。这是一个有效的解决方案：document.addEventListener('mousemove', (e) => {&nbsp; &nbsp;const mouseFollow = document.getElementById('mouse-follow');&nbsp; &nbsp;const x = e.clientX - 25; //-25 to center div over mouse&nbsp; &nbsp;const y = e.clientY - 25;&nbsp;&nbsp; &nbsp;console.log(x);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;mouseFollow.style.top = `${y}px`;&nbsp; &nbsp;mouseFollow.style.left = `${x}px`;})#mouse-follow{&nbsp; background: orange;&nbsp; position: absolute;}<span id=mouse-follow>*</span>