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

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

• 使用位置:固定；。 clientX/Y 是相对于视口(viewport)的，所以 CSS 位置也是固定的。
• 缓存您的选择器，无需在每次鼠标移动时都查询 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>