CSS跟随鼠标位置，JS获取坐标技巧

本文深入解析了如何通过JavaScript实时捕获鼠标或触摸位置并将其动态注入CSS自定义属性（写入:root确保全局可用），再由CSS利用这些变量实现高性能、平滑的视觉响应——如背景定位跟随、伪元素位移等；重点强调了归一化坐标（百分比）、单位一致性、防抖节流、移动端适配（事件探测与touch坐标处理）、避免重排（优先使用transform而非left/top）以及常见陷阱（如pageX偏移、preventDefault遗漏、calc中%运算限制等），为构建流畅、跨端兼容的交互式UI提供了完整、可落地的技术方案。

怎么用 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学习网公众号！