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

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) => {

  mouseFollow.style.cssText = `

    left: ${e.clientX - 25}px;

    top:  ${e.clientY - 25}px;

  `;

});

body {

  height: 200vh;

}

#mouse-follow {

  position: fixed;

  left: 0;

  top:0;

  padding: 25px;

  background: red;

}

<div id="mouse-follow"></div>

Answer 2

我怀疑您缺少的是元素必须具有绝对位置。这是一个有效的解决方案：

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; 

   console.log(x);

    

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

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

})

#mouse-follow{

  background: orange;

  position: absolute;

}

<span id=mouse-follow>*</span>