滚动吸附（Scroll Snapping）时如何实现背景色平滑过渡？

针对你提到的网站效果，核心是CSS滚动驱动动画配合滚动吸附布局实现的，具体拆解如下：

1. 搭建滚动吸附基础布局 #

先通过CSS滚动吸附属性，让页面区块在滚动时精准对齐视口，为背景色切换提供稳定的触发节点：

.page-container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
}

.section {
  height: 100vh;
  scroll-snap-align: start;
}

这段代码会让每个.section滚动到视口时自动吸附到顶部，确保滚动分段清晰。

2. 用滚动驱动动画实现背景色平滑过渡 #

利用现代浏览器支持的滚动驱动动画特性，将滚动进度直接映射为背景色的渐变过程：

/* 绑定动画到页面滚动行为 */
.page-container {
  animation: bg-transition linear;
  animation-duration: 1ms; /* 让动画进度完全匹配滚动进度 */
  animation-timeline: scroll(root block);
}

/* 定义背景色过渡关键帧 */
@keyframes bg-transition {
  0% { background-color: #f8f8f8; }
  33% { background-color: #2a2a2a; }
  66% { background-color: #e63946; }
  100% { background-color: #457b9d; }
}

这里的核心是通过animation-timeline: scroll(root block)把动画和页面滚动绑定，极短的animation-duration让动画进度完全跟随滚动距离，从而实现滚动过程中背景色的无缝渐变。

3. 区块级精准过渡优化 #

如果需要每个吸附区块对应特定的背景色，可以根据区块数量计算滚动占比，在关键帧中设置对应颜色节点。比如3个区块，每个占33%左右的滚动进度，就能让滚动到每个区块时，背景色刚好完成对应阶段的过渡。

4. 旧浏览器兼容方案 #

如果要兼容不支持滚动驱动动画的浏览器，可以通过JS监听滚动事件，实时计算滚动进度并更新背景色：

const container = document.querySelector('.page-container');
const totalScrollHeight = container.scrollHeight - window.innerHeight;

container.addEventListener('scroll', () => {
  const scrollProgress = container.scrollTop / totalScrollHeight;
  // 用HSL颜色模式实现更顺滑的色相过渡
  const hue = scrollProgress * 360;
  container.style.backgroundColor = `hsl(${hue}, 70%, 80%)`;
});

通过requestAnimationFrame（默认事件触发频率足够）实时更新颜色，同样能达到平滑切换的效果。

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