纯CSS无法动态响应元素位置，必须用JS通过getBoundingClientRect()获取坐标并设为CSS变量；需节流（requestAnimationFrame）、归一化映射、避免无效计算。
background-color 怎么用 CSS 变量动态响应元素位置
纯 CSS 无法读取元素坐标，所以必须靠 JS 把 getBoundingClientRect() 拿到的数值转成 CSS 自定义属性。关键不是“怎么设背景色”，而是“怎么把位置变成可被 CSS 消费的变量”。
- CSS 里只能用
var(--bg-hue)这类变量做颜色计算，不能直接写hsl(calc(100 * var(--x)), 70%, 60%)—— 浏览器不支持在hsl()里嵌套calc()+ 变量混合运算 - JS 要主动更新
document.documentElement.style或目标容器的style，不能只改 class - 别用
offsetLeft/Top：它依赖 offsetParent，滚动或 transform 下会失真；getBoundingClientRect()才是真实视口坐标
监听 scroll 和 resize 时怎么避免频繁触发重绘
位置一动就调 element.style.setProperty()，滚动时每秒可能触发上百次，CPU 直接拉满。得节流，但不是简单套 setTimeout 就完事。
- 用
requestAnimationFrame()是最优解：浏览器会在下一帧前合并多次调用，且天然与渲染节奏同步 - 别监听
window.onscroll：移动端 touchmove、桌面滚轮都可能触发，统一用addEventListener('scroll', handler, { passive: true }) - resize 要单独处理 —— 它和 scroll 触发时机不同，不能共用同一个节流函数
怎么把坐标映射成有意义的颜色值（比如 x→hue, y→saturation）
直接把 clientX 塞进 --bg-hue 会导致 hue 超出 0–360 范围，CSS 会静默失败（颜色变黑或透明）。必须做归一化 + 截断。
- 先算比例：
const xRatio = Math.max(0, Math.min(1, rect.left / window.innerWidth)) - 再映射：
const hue = Math.round(xRatio * 360)，确保是整数且在合法区间 - 如果要平滑过渡，用
hsl(var(--bg-hue), 80%, 60%)，别用 rgb —— hsl 对变量更友好，rgb 的三个通道得分别设变量，太啰嗦 - 注意：
rect.left是相对于视口左上角，如果元素在 fixed 容器里，要用rect.x更稳妥
为什么 background-color 不随 transform 移动而更新
因为 getBoundingClientRect() 返回的是布局后的最终坐标，它已经包含了 transform 效果。但如果你监听的是父容器的 transform 动画，而没重算子元素位置，JS 就不会感知变化 —— 它只响应 layout change，不响应 paint-only 变更。
立即学习“前端免费学习笔记（深入）”；
- 对 transform 动画，得用
new ResizeObserver或IntersectionObserver配合getComputedStyle(element).transform解析矩阵，再手动算坐标 - 更简单的办法：给动画元素加
will-change: transform，并强制在动画帧里调一次element.getBoundingClientRect()，触发重排 - 别依赖
offsetParent或getClientRects()：它们在 transform 下返回的可能是原始坐标，不是渲染后位置
真正难的不是写那几行 JS，而是判断什么时候该重算、什么时候可以跳过 —— 比如元素被 display: none 了，或者超出视口太远，还硬算坐标只会白耗性能。
