CSS实现鼠标跟随的自定义光标：动态更新Absolute定位坐标方法

cursor: url() 不适合动态跟随效果，因其仅支持静态图片且无法响应鼠标实时位置、缩放、滚动等交互；必须用绝对定位 DOM 元素 + mousemove + requestAnimationFrame 模拟，并处理坐标偏移与性能优化。

为什么 cursor: url() 不适合做动态跟随效果

直接用 CSS 的 cursor: url() 只能指定静态图片，无法响应鼠标实时位置、缩放、滚动或页面交互（比如悬停按钮时换图标）。它本质是系统级光标替换，坐标由浏览器底层控制，你拿不到、也改不了它的偏移逻辑。想让“自定义光标”精准贴着鼠标指针移动，必须放弃 cursor 属性，改用一个绝对定位的 DOM 元素模拟。

用 position: absolute 元素 + mousemove 实现跟随

核心思路：创建一个 <div id="custom-cursor"></div>，初始设为 position: absolute; pointer-events: none;，再监听 mousemove 事件，把 event.clientX 和 event.clientY 赋给它的 left 和 top。注意以下几点：

• pointer-events: none 必须加，否则会拦截底层鼠标事件，导致按钮点不中、hover 失效
• 坐标要减去元素自身宽高的一半（比如光标是 24×24 的圆点），否则默认左上角对齐，看起来总在鼠标右下偏移
• 如果页面有横向滚动条，clientX 仍有效；但若容器设置了 transform: scale() 或 zoom，需额外修正坐标（见下一点）

滚动/缩放/嵌套容器下坐标偏移怎么修

当页面存在 window.scrollX/Y、transform: scale(0.8) 或光标容器被包在 position: relative 的父级里时，仅靠 clientX/clientY 会错位。此时需分层计算：

• 基础坐标 = event.clientX + window.scrollX（处理横向滚动）
• 缩放修正：若外层有 scale(s)，则真实 left = (clientX + scrollX - offsetX) / s + container.offsetLeft，其中 offsetX 是光标元素自身水平偏移量（如宽的一半）
• 最稳妥做法：用 element.getBoundingClientRect() 获取目标容器视口位置，再结合 event.clientX/Y 做相对计算，避免嵌套 offset 累积误差

简单场景下，直接用 document.documentElement.scrollTop 补全 vertical 偏移就够了；复杂布局建议封装一个 getRealPosition(event, targetContainer) 工具函数。

立即学习“前端免费学习笔记（深入）”；

性能关键：节流 + requestAnimationFrame

高频 mousemove 直接改 style.left/top 容易掉帧，尤其在低配设备上。不要用 setTimeout 节流到 16ms——它和屏幕刷新不同步。正确做法：

• 监听 mousemove，只更新两个变量：latestX 和 latestY
• 用 requestAnimationFrame 驱动一次 DOM 更新，读取最新坐标并设置 style.transform = translate(${x}px, ${y}px)
• 优先用 transform 而非 left/top，触发合成层，避免 layout 回流

如果还要加淡入/拖尾/旋转等动效，直接在 transform 里叠加 rotate() 或用 will-change: transform 提前提示浏览器。

真正难的不是定位，而是各种上下文干扰：iframe 跨域限制、移动端 touchmove 坐标差异、CSS contain: paint 截断渲染、甚至某些浏览器对 pointer-events: none 在 fixed 元素上的兼容性 bug。上线前务必在 iOS Safari 和 Chrome Android 上实测滚动+缩放组合场景。