CSS动态跟随鼠标，JS记录坐标教程

本文深入解析了如何通过JavaScript动态捕获鼠标或触摸位置并实时同步至CSS自定义属性，实现高性能、跨设备的视觉响应效果；核心在于将归一化后的坐标（如百分比）安全写入`:root`全局变量，配合CSS的`background-position`或`transform: translate()`精准驱动元素行为，同时规避常见陷阱——包括单位不一致、事件重复触发、移动端坐标获取错误、未防抖导致卡顿、以及`left/top`引发的重排性能问题，并强调用能力探测替代UA判断来优雅兼容鼠标与触摸交互，让交互动效既流畅又健壮。

怎么用 document.addEventListener('mousemove') 实时更新 CSS 变量

核心是把鼠标坐标存进 :root 的 CSS 自定义属性，让 CSS 能“看到”它。JS 只负责写，CSS 负责读和响应，分工明确。

常见错误是直接在元素上设 style.setProperty，结果变量只对那个元素生效，没法被后代或伪元素复用；必须写到 :root 才全局可用。

• 监听 mousemove 时记得用 throttle（比如 60fps 限频），否则频繁触发会卡顿
• 坐标建议用 event.clientX / event.clientY，不是 pageX —— 后者受滚动影响，容易在滚动后偏移
• 写入前做边界检查：比如 Math.max(0, Math.min(window.innerWidth, x))，避免负值或超窗导致计算异常

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

background-position 怎么跟着鼠标动但不跳变

直接写 background-position: var(--mouse-x) var(--mouse-y) 看似合理，但实际会抖动甚至翻转——因为背景图默认以左上为原点，而鼠标坐标是绝对像素值，没做归一化或锚点对齐。

真正稳定的做法是把坐标转成百分比，并配合 background-size 和 background-repeat 控制行为。

• 用 calc((var(--mouse-x) / 100%) * 100) 这类写法不可行——CSS 不支持在 calc 里用 % 做除法运算
• 稳妥方案：JS 算好百分比（e.clientX / window.innerWidth * 100），再存为 --mouse-x-pct，CSS 里直接用 background-position: var(--mouse-x-pct)% var(--mouse-y-pct)%
• 必须设 background-size: 200% 200% 或更大，否则小图拉伸后坐标映射失真

为什么 ::before 里用 transform: translate() 比直接改 left/top 更稳

用 left: var(--mouse-x) 配合 position: absolute 看似简单，但会触发 layout，频繁重排影响性能；而且一旦父容器有 transform 或 overflow:hidden，坐标就错乱。

transform: translate() 是合成层操作，不触发重排，坐标也始终相对于自身，兼容性好（现代浏览器全支持）。

• 别写 translate(var(--mouse-x), var(--mouse-y)) —— CSS 不支持在 transform 里混用单位和无单位值，必须确保变量带单位（如 'px'）
• 如果想限制移动范围（比如只在容器内浮动），JS 端就要提前算好最大偏移量，再写进变量，CSS 不做条件判断
• 注意 transform 默认以元素中心为原点，若要以左上对齐，得加 transform-origin: 0 0

移动端 touchmove 怎么和 mousemove 共存不冲突

单纯监听 touchmove 并覆盖 mousemove，会导致桌面端失效；反过来则移动端没响应。不能靠 UA 判断，得用事件能力探测。

关键点在于：移动端 touch 事件坐标字段不同（e.touches[0].clientX），且默认会触发 click 延迟，需 e.preventDefault() 抑制。

• 不要同时监听两个事件然后手动合并——会产生重复触发和坐标抖动
• 推荐策略：先检测 'ontouchstart' in window，是则只绑 touchmove，否则绑 mousemove
• touch 事件里取坐标必须用 e.touches[0]，不是 e.changedTouches[0] —— 后者只包含本次变化的触点，可能为空
• PC 浏览器开发者工具模拟 touch 时，clientX/Y 可能返回 0，建议加 fallback：优先用 touches，降级用 clientX

事情说清了就结束。最常漏的是移动端 touch 的坐标来源和 preventDefault，一漏就动不了；还有就是变量单位不一致导致 transform 失效，查起来特别费时间。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS动态跟随鼠标，JS记录坐标教程》文章吧，也可关注golang学习网公众号了解相关技术文章。