本文详解如何修复长页面中圆形光标跟随鼠标时因滚动偏移导致的跳动问题，通过正确计算 pageY 与 scrollY 的差值，确保光标在任意高度页面（如 200vh）中精准、平滑地跟随鼠标。
本文详解如何修复长页面中圆形光标跟随鼠标时因滚动偏移导致的跳动问题，通过正确计算 `pagey` 与 `scrolly` 的差值，确保光标在任意高度页面（如 200vh）中精准、平滑地跟随鼠标。
在网页中实现「圆形光标跟随鼠标」是一种常见且富有表现力的交互效果，常用于作品集、创意站或品牌官网。其核心原理是监听 mousemove 事件，动态更新一个绝对定位元素（如 <div class="cursor">）的 left 和 top 值。然而，当页面高度超过视口（例如设置 body { height: 200vh; }），原生 e.pageY 返回的是相对于整个文档顶部的 Y 坐标，而若未减去当前垂直滚动距离 window.scrollY，就会导致光标在滚动后严重下偏——这就是问题的根源。
✅ 正确做法：使用 e.pageY - window.scrollY 获取相对于当前视口顶部的 Y 坐标，再结合光标自身尺寸做中心对齐修正：
document.addEventListener('mousemove', (e) => {
const cursor = document.querySelector('.cursor');
// ✅ 关键修复：减去滚动偏移，确保坐标基于可视区域
const x = e.pageX;
const y = e.pageY - window.scrollY; // 修复纵向偏移
// 可选：居中对齐（假设光标宽高为 14px）
cursor.style.left = `${x - 7}px`;
cursor.style.top = `${y - 7}px`;
});⚠️ 注意事项：
- 不要使用 e.clientY 替代 e.pageY - window.scrollY：虽然 clientY 本身已基于视口，但它不包含滚动条宽度影响，在某些浏览器或缩放场景下可能产生微小偏差；而 pageY - scrollY 更鲁棒，语义清晰。
- 若需兼容移动端，应额外监听 touchmove 并使用 e.touches[0].pageX/Y，但本例聚焦桌面端。
- 性能优化建议：为避免频繁重排，可将 cursor.style 改为 CSS 自定义属性 + transform（推荐）：
.cursor { transform: translate(var(--x, 0), var(--y, 0)); }对应 JS 中改为：
cursor.style.setProperty('--x', `${x - 7}px`); cursor.style.setProperty('--y', `${y - 7}px`);
? 总结：该效果看似简单，实则对坐标系理解要求较高。核心在于区分「文档坐标系」与「视口坐标系」。只要牢记 pageY 是全局坐标、scrollY 是已滚动距离，二者相减即得当前视口内坐标——这一原则同样适用于所有需要响应滚动的鼠标追踪场景（如悬停提示、视差跟随等）。
