核心是监听位置+节流更新+css过渡：用intersectionobserver监听区块触发变色（适合分屏区域），或window.scrolly阈值判断（适合导航栏）；必须设css变量、声明transition、兜底初始背景色，并做好兼容降级。
滚动时背景变色，核心不是“改body背景”，而是“监听位置 + 节流更新 + CSS过渡”——直接写window.onscroll改style.backgroundColor，卡顿、闪烁、移动端失效是大概率事件。
用IntersectionObserver监听区块触发变色
适合页面有明确分屏区域（如首页、产品、团队、联系），每个区块带data-color属性，进入视口时切背景色。比scroll事件更轻量、不卡顿、自动处理节流。
- 必须给目标元素加
class="section"或类似标识，IntersectionObserver靠它选中 -
rootMargin: "0px 0px -50% 0px"可让变色提前半屏触发，避免“刚露头才变”的滞后感 - 回调里别直接设
document.body.style.backgroundColor，改CSS变量更利于复用和主题切换：document.documentElement.style.setProperty("--bg-main", color) - 记得在CSS里声明
transition: background-color 0.4s ease，否则颜色跳变
用window.scrollY做阈值判断（导航栏/首屏变色）
适合导航栏从透明到实色、或首屏标题下方出现色块这类“滚动距离驱动”的场景，不用依赖区块结构。
- 别用
document.body.scrollTop——在标准模式下永远是0，统一用window.scrollY或document.documentElement.scrollTop - 把
scroll监听包进requestAnimationFrame，避免连续触发重排：let ticking = false; function update() { if (!ticking) { requestAnimationFrame(() => { /* 实际逻辑 */ ticking = false; }); ticking = true; } } - 阈值建议设为
50或80像素，太小易误触（尤其移动端手指滑动抖动） - 背景色用
rgba(255, 255, 255, 0.95)而非opacity，文字不会跟着发虚
为什么transition经常不生效？
写了transition: background-color 0.3s却还是瞬切，八成是这几个地方没对：
- 初始状态没显式声明
background-color，比如body默认无背景色，从undefined到#fff无法过渡——务必写background-color: transparent或background-color: #fff兜底 - 用了
transition: all 0.3s，结果box-shadow或transform也被拖进来，造成意外闪烁 - 在JS里用
element.style.backgroundColor = "red"后立刻又设回空字符串或""，触发了浏览器的“样式重置优化”，跳过过渡 - CSS变量更新后，如果
background-color: var(--bg-main)所在的选择器权重不够，可能被其他规则覆盖，导致过渡对象实际没变
移动端和深色模式下的坑
iOS Safari 和部分安卓WebView对scroll事件响应迟钝，且IntersectionObserver在低版本存在兼容问题；深色模式下硬编码#ffffff会刺眼。
- 检测是否支持
IntersectionObserver，不支持则降级为scroll + requestAnimationFrame，别直接报错 - 用
@media (prefers-color-scheme: dark)配合:root变量定义两套色值，滚动变色时读取getComputedStyle(document.documentElement).getPropertyValue("--bg-main-dark") - iOS上
position: fixed导航栏滚动时容易错位，加backface-visibility: hidden或will-change: transform可缓解 - 别在
scroll回调里调用getBoundingClientRect()或offsetHeight，强制同步布局（forced reflow）会让60fps直接掉到20fps
真正难的不是写几行代码让背景变色，而是让变色在各种设备、各种滚动速度、各种系统设置下都稳得住——过渡参数、监听方式、降级路径，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
