CSS实现鼠标跟随自定义光标及动态绝对定位

不过，以下几个细节极易出错：

• 中心点对齐：若直接将元素左上角对准鼠标坐标，光标会始终偏向右下方。正确做法是在设置坐标时，减去元素自身宽高的一半，使其中心点与鼠标指针对齐。
• 滚动条处理：clientX/Y 是相对于当前可视窗口的。如果页面存在纵向滚动，需要加上 window.scrollY 才能得到相对于整个文档的准确位置。横向滚动同理。

应对复杂布局：滚动、缩放与嵌套容器

上述方法在简单静态页面上可行，但实际项目往往更复杂：页面可能被整体缩放，或者“假光标”被置于某个 position: relative 的容器中。此时，仅靠 clientX/Y 和滚动偏移计算出的坐标可能不准确。

问题通常源于CSS变换和定位上下文：

• 缩放修正：若外层容器使用了 transform: scale(0.8)，容器内所有位置的感知会“缩小”。此时需将计算出的坐标除以缩放比例，才能让光标在视觉上跟随鼠标。
• 嵌套定位：如果光标元素位于非静态定位（如 relative、absolute）的父级中，其 left/top 是相对于该父级边界的。需要先计算鼠标相对于该父级容器的坐标，而非整个文档。

最稳妥的解决方案是借助 Element.getBoundingClientRect() API。它能精准获取元素相对于视口的位置和尺寸，结合鼠标的 clientX/Y 进行相对计算，可有效避免因多层嵌套和复杂变换导致的累积误差。

对于简单场景，手动补全滚动偏移可能足够。但对于稍复杂的布局，建议封装一个类似 getAdjustedPosition(event, container) 的工具函数，一劳永逸地处理坐标转换问题。

性能优化：实现丝滑体验的关键

mousemove 事件触发频率极高，若每次触发都直接修改DOM元素的样式，极易导致页面卡顿，尤其在性能有限的设备上。

常见的节流方案是使用 setTimeout 限制更新频率（如每16毫秒更新一次）。但该方法与屏幕刷新周期（通常约16.7ms一帧）不同步，可能导致视觉上不跟手或抖动。

更优的方案是结合 requestAnimationFrame：

1. 在 mousemove 事件中，仅更新两个存储最新坐标的变量（例如 latestX、latestY）。
2. 然后，通过持续的 requestAnimationFrame 循环驱动渲染。在该循环中读取最新坐标，并更新光标元素的位置。

这样做的好处是，光标位置更新与浏览器的每一帧绘制对齐，确保动画流畅。

另一性能技巧：更新位置时，优先使用 transform: translate(x, y)，而非直接修改 left/top。因为 transform 属性通常由合成器线程处理，可避免触发昂贵的布局（Layout）计算。若光标还需旋转、缩放等动画，可直接将其他变换函数添加在同一 transform 中。

最后，必须指出：实现基础跟随只是第一步，真正的挑战来自各种边界情况和兼容性问题——iframe内的坐标获取、移动端触摸事件与鼠标事件的差异、某些CSS属性（如 contain: paint）对绝对定位元素的渲染影响，以及不同浏览器对 pointer-events: none 行为的细微差异。上线前，务必在iOS Safari和Android Chrome等移动端浏览器上进行充分的滚动、缩放组合场景测试，以确保效果万无一失。