滚动驱动颜色变化必须用javascript监听scrolly或intersectionobserver，纯css无法实现；通过节流、class切换和css过渡控制变色时机与平滑性，兼顾性能与兼容性。
滚动驱动颜色变化不是靠 CSS 自身“感知”滚动，而是必须用 JavaScript 监听 window.scrollY 或元素的 getBoundingClientRect()，再动态更新样式。纯 CSS 无法实现真正的滚动驱动（scroll-timeline 仍属实验性且兼容性极差）。
监听 scroll 事件 + 动态修改 color 或 background-color
这是最直接、兼容性最好的方式。关键不是“滚动时变色”，而是“滚动到某位置时触发变色”。
- 用
window.addEventListener('scroll', handler)监听全局滚动，或用IntersectionObserver监听元素进入视口（更精准、性能更好） - 在回调里读取
window.scrollY，与预设阈值比较（比如scrollY > 200），再通过element.style.color = '#3b82f6'或element.classList.toggle('active')控制颜色 - 避免在 scroll 回调中直接写大量计算或 DOM 操作；加节流（
throttle）或用requestIdleCallback防卡顿 - 示例：导航栏滚动后变深色背景 + 文字变白
const navbar = document.getElementById('navbar');
window.addEventListener('scroll', () => {
if (window.scrollY > 100) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
CSS 中定义：.scrolled { background: #1e293b; color: white; }
用 IntersectionObserver 实现“逐段着色”效果
适合多段文字/卡片随滚动依次变色，比 scroll 事件更稳定、不抖动，也避免了手动计算临界点。
- 对每个需要滚动触发的元素（如
<p class="color-trigger"></p>）创建IntersectionObserver实例 -
threshold: [0.1]表示元素顶部进入视口 10% 时触发，rootMargin: '-100px'可提前触发（模拟“距顶部 100px 进入”） - 回调中为进入视口的元素添加类名（如
.in-view），颜色由 CSS 控制，不硬编码颜色值 - 注意：Observer 实例应复用，不要为每个元素新建一个
滚动中实时渐变文字颜色（逐字符着色）
这不是简单改 color，而是把文本拆成单字符 <span></span>，再按滚动进度逐个加 class。容易卡顿，务必节流 + 使用 will-change: transform 提升渲染层。
- 预处理：用
textContent.split('')将文字转为<span></span>数组并插入 DOM - 监听
scroll，计算当前滚动比例：progress = Math.min(1, window.scrollY / (document.body.scrollHeight - window.innerHeight)) - 根据
progress算出应着色的字符数量，用for循环批量加 class（别用forEach+setTimeout） - CSS 中用
transition: color 0.3s ease实现平滑过渡，否则会突变 - 移动端慎用——频繁重排重绘易掉帧
为什么不用 scroll-timeline？
虽然 CSS @keyframes + scroll-timeline 理论上能声明式驱动动画，但截至 2026 年 4 月：
-
scroll-timeline仅 Chromium 120+ 支持，Firefox 和 Safari 完全不支持 - 无法用于直接控制
color，只能驱动transform、opacity等可动画属性（color需配合@property，而后者兼容性更差） - 调试困难：timeline 范围、源元素绑定、方向判断都容易出错，报错信息模糊（如
Invalid timeline source） - 实际项目中，用 JS + class 切换更可控、更容易和业务逻辑耦合（比如滚动到某模块才加载颜色配置）
真正难的不是“怎么变色”，而是“什么时候变、变多少、是否可逆、是否影响滚动性能”——这些细节没处理好，滚动一卡，用户第一反应是“这网站好慢”，而不是“颜色没变对”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
