如何实现滚动触发的平滑background-color过渡 解决移动端卡顿

问题原因 #

你当前的写法卡顿核心是三个问题：

• 直接对background-color做过渡属于Paint（重绘）层级的CSS操作，不会触发GPU合成加速，移动端CPU/GPU性能有限，高频更新时极易掉帧
• 如果直接监听原生scroll事件且无节流，滚动过程中每秒会触发上百次回调，主线程负载过高，进一步加剧卡顿
• 给background-color加will-change没有任何优化效果，因为该属性本身不在GPU合成层处理范围内，反而会额外占用浏览器内存。

最优实现方案 #

核心思路是用两层独立背景叠加，通过修改上层背景透明度的方式实现颜色过渡：opacity是标准的合成层属性，修改时不会触发重排、重绘，可以直接调用GPU渲染，移动端流畅度远高于直接修改背景色。

1. 分段触发过渡（到指定滚动位置自动完成过渡） #

适合不需要跟手、滚动到特定区域就切换背景的场景：

body {
  position: relative;
  min-height: 100vh;
  /* 底层默认黑色 */
  background-color: #000;
}

/* 上层白色背景，固定定位铺满全屏 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-color: #fff;
  /* 初始完全透明，露出底层黑色 */
  opacity: 0;
  /* 仅对opacity做过渡，性能最优 */
  transition: opacity 0.3s linear;
  /* 强制推到GPU合成层，开启硬件加速 */
  will-change: opacity;
  transform: translateZ(0);
  /* 放在所有页面内容下层，不遮挡交互元素 */
  z-index: -1;
}

/* 触发后白色背景完全不透明 */
body.bg-to-white::before {
  opacity: 1;
}

配合高性能的IntersectionObserver做触发逻辑，比原生scroll事件监听性能高60%以上：

// 在页面需要触发背景切换的位置放置一个空锚点元素，比如 <div id="bg-trigger"></div>
const triggerEl = document.querySelector("#bg-trigger");
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      document.body.classList.add("bg-to-white");
    } else {
      document.body.classList.remove("bg-to-white");
    }
  })
}, {
  threshold: 0,
  // 可通过rootMargin调整触发时机，比如提前200px触发就写 rootMargin: '0px 0px -200px 0px'
  rootMargin: "0px 0px -50% 0px"
})
observer.observe(triggerEl);

2. 跟手线性过渡（随滚动距离逐渐从黑变白） #

适合需要滚动多少就变多少的跟手场景：

body {
  position: relative;
  min-height: 100vh;
  background-color: #000;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-color: #fff;
  /* 通过CSS变量接收JS计算的过渡进度 */
  opacity: var(--bg-progress, 0);
  will-change: opacity;
  transform: translateZ(0);
  z-index: -1;
  /* 跟手场景去掉transition，避免滚动延迟 */
}

JS部分用requestAnimationFrame做节流，对齐浏览器刷新率，避免多余计算：

let ticking = false;
function calcBgProgress() {
  const scrollY = window.scrollY;
  const totalScroll = document.documentElement.scrollHeight - window.innerHeight;
  // 自定义过渡完成的滚动位置，这里设置为滚动到页面1/3高度时完全变白
  const triggerDistance = totalScroll / 3;
  const progress = Math.min(scrollY / triggerDistance, 1);
  document.body.style.setProperty("--bg-progress", progress);
  ticking = false;
}

window.addEventListener("scroll", () => {
  if (!ticking) {
    window.requestAnimationFrame(calcBgProgress);
    ticking = true;
  }
}, { passive: true }); // passive标记避免阻塞原生滚动

优化注意事项 #

• 所有动画、过渡效果优先使用transform、opacity两个合成层属性，尽量避免直接修改background-color、width、top等会触发重排重绘的属性
• 滚动监听必须加passive: true标记，告诉浏览器该监听不会阻止默认滚动行为，大幅提升移动端滚动流畅度
• 不要滥用will-change，只给需要频繁修改的合成层属性加，用完及时移除，避免不必要的内存占用

内容的提问来源于stack exchange，提问作者Goran Taskov