元素跟随鼠标移动和滚动

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 elPointer  = document.querySelector("#pointer");

addEventListener("mousemove", (evt) => {
  elPointer.style.cssText = `
    left: ${evt.clientX}px;
    top:  ${evt.clientY}px;
  `;
});

body { /* DEMO scrollbars */ min-height: 200vh; }

#pointer {
  position: fixed;
  padding: 20px;
  background: #f0b;
  translate: -50% -50%;
  left: 0;
  top: 0;
}

<div id="pointer"></div>

另一个不错的方法是使用 JS 的style.setProperty()并将值更改为 CSS 变量，例如：

const elPointer = document.querySelector("#pointer");

addEventListener("mousemove", (evt) => {
  elPointer.style.setProperty("--x", evt.clientX);
  elPointer.style.setProperty("--y", evt.clientY);
});

body { /* DEMO scrollbars */ min-height: 200vh; }

#pointer {
  position: fixed;
  padding: 20px;
  background: #f0b;
  translate: -50% -50%;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
}

<div id="pointer"></div>