纯css无法让background-color响应滚动变化，因scroll-driven animation不支持该属性；必须用js驱动css变量+transition实现平滑变色，核心是正确计算滚动进度并映射到hsl或color-mix。
纯 CSS 无法让 background-color 真正响应滚动位置变化——@scroll-timeline 不支持该属性动画，直接写 animation: bg-change 1s linear 绑定滚动，浏览器会静默忽略或 fallback 到时间线播放，不是你想要的“随滚变动”。必须用 JS 驱动 + CSS 变量 + transition 才能稳定生效。
为什么 scroll-driven animation 不能直接改 background-color
background-color 和 color 不在当前 CSS Scroll-driven Animations（SDA）规范支持的可动画属性列表里。Chrome 126+、Firefox 119+ 遇到类似写法会直接跳过，或报 Invalid property 警告。你看到的“变色”，其实是动画退回到默认 document timeline 播放的结果，和滚动无关。
真正被原生支持的颜色相关属性只有：opacity、transform、部分 filter 函数、clip-path。想让颜色“动”，得把颜色拆成可插值的数值维度：
- 用
hsl(var(--h), 80%, 60%)，只动画--h - 或用
color-mix(in srgb, #3b82f6 calc(100% - var(--p)), #ef4444 var(--p))，让--p被滚动进度驱动
window.scrollY 计算滚动比例的正确写法
滚动进度映射成颜色，核心是算出 0 → 1 的比例值。错误写法：window.scrollY / document.documentElement.scrollHeight——这会导致拉到底部时比例永远小于 1，因为 scrollHeight 包含不可见 padding 和 border。
正确公式是：window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)，且必须加防零保护：
const maxScroll = Math.max( document.documentElement.scrollHeight - window.innerHeight, 1 ); const progress = Math.min(window.scrollY / maxScroll, 1);
这个 progress 就是你后续映射到 hue、alpha 或 color-mix 权重的输入值。
用 CSS 变量 + transition 实现平滑背景色过渡
直接写 document.body.style.backgroundColor = '#ff6b6b' 会导致跳变，且移动端极易卡顿。可靠做法是：JS 更新 CSS 变量，CSS 声明 transition，由浏览器做插值。
关键三步缺一不可：
- CSS 中显式声明初始背景色和过渡：
body { background-color: var(--bg, #ffffff); transition: background-color 0.4s ease; } - JS 用
document.documentElement.style.setProperty('--bg', newColor)更新变量（不要用document.body.style） - 务必给
:root设默认值：:root { --bg: #ffffff; }，否则首次渲染可能无背景
如果用了 transition: all 0.4s，记得检查是否意外触发了 box-shadow 或 transform 动画，造成闪烁。
IntersectionObserver 更适合分段变色场景
如果你的页面有明确区块（如 <section data-bg="#1e40af"></section>），比监听全局滚动更精准、性能更好，也天然带节流。
实操要点：
- Observer 的
rootMargin: "0px 0px -30% 0px"让变色提前触发，避免“刚露头才变”的延迟感 - 回调里别直接设 body 背景，统一走
document.documentElement.style.setProperty('--bg', entry.target.dataset.bg) - 复用同一个 Observer 实例，不要为每个 section 新建一个
滚动越快，IntersectionObserver 触发越稳；而 scroll 事件在快速滑动时容易漏帧，尤其 iOS Safari。
真正难的不是“怎么让颜色变”，而是控制变色时机不滞后、不抖动、不卡顿。滚动中更新 CSS 变量看似简单，但 requestAnimationFrame 节流、分母防零、transition 兜底、变量作用域这几个点漏掉任意一个，效果就断层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
