鼠标跟随效果实现：JS实时更新--x和--y变量

本文深入解析了如何用原生JavaScript高效实现鼠标跟随效果，核心是通过监听`mousemove`事件实时更新根元素的CSS自定义变量`--x`和`--y`，利用`clientX/clientY`获取精准视口坐标并避免`body`引用导致的滚动偏移；同时澄清了常见误区——如`calc()`中混用单位引发的样式失效、移动端Safari对`mousemove`的兼容限制及应对策略（优先`touchmove`+`e.touches[0]`），强调真正关键不在代码量，而在于厘清坐标系语义（视口 vs 文档）、设备交互差异与性能本质（纯变量赋值零重排），为构建平滑、跨端一致的光标跟随体验提供扎实可靠的技术路径。

直接用 mousemove 事件更新 CSS 自定义属性即可，不需要框架或额外库，但要注意坐标系转换和性能陷阱。

如何用 document.addEventListener('mousemove') 同步更新 --x 和 --y

核心是监听鼠标移动，把 event.clientX 和 event.clientY 赋给根元素（:root）的 CSS 变量。注意：必须用 document.documentElement.style.setProperty()，不能写成 document.body——否则在滚动页面时坐标会偏移。

• clientX/clientY 是视口坐标，适合做“跟随光标”效果；若需文档坐标（如固定定位元素），改用 pageX/pageY，但要手动减去 window.scrollX/Y
• 避免在每次 mousemove 中调用 getBoundingClientRect() 或查询 DOM——纯设变量不触发重排，性能好
• 示例代码：

  document.addEventListener('mousemove', e => {
    document.documentElement.style.setProperty('--x', e.clientX + 'px');
    document.documentElement.style.setProperty('--y', e.clientY + 'px');
  });

为什么 transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%)) 会错位

因为 calc() 中混用单位（px 和 %）会导致计算失败，CSS 解析器直接丢弃整条声明。自定义变量存的是带单位的字符串（比如 "123px"），不能直接参与百分比运算。

• 正确做法：统一用 px，再用 transform: translate(var(--x), var(--y))，然后配合 position: fixed 或 absolute 定位
• 若真需要居中对齐光标（比如一个圆形指针），先设元素 width/height 固定，再用 transform: translate(calc(var(--x) - 20px), calc(var(--y) - 20px))（假设宽高各 40px）
• 别在 calc() 里写 var(--x) - 50%——语法非法，浏览器控制台会报 Invalid property value

移动端和 Safari 的兼容性问题怎么处理

iOS Safari 不支持在 mousemove 中持续触发（尤其非触摸区域），且部分旧版 Safari 对 setProperty() 更新 CSS 变量有延迟。这不是 bug，是设计限制。

• 移动端优先监听 touchmove，并用 e.touches[0] 取坐标；同时保留 mousemove 供桌面端使用
• 不要依赖 requestAnimationFrame 包裹 setProperty——它反而增加延迟；CSS 变量更新本身是异步但足够快
• Safari 14.5+ 已修复大部分变量响应问题，但低于此版本建议加降级：用 element.style.left = x + 'px' 直接设内联样式（仅当必要时）

真正难的不是写这十几行 JS，而是想清楚你要的是「相对于视口」还是「相对于文档」的坐标，以及是否要兼容手指滑动时的抖动。变量更新本身没坑，坑都在坐标语义和设备行为差异上。

到这里，我们也就讲完了《鼠标跟随效果实现：JS实时更新--x和--y变量》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！