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

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>

Answer 2

欢迎来到@psshaw20。

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

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>