CSS 原生视差滚动：零 JavaScript 的性能方案与关键帧策略

视差滚动作为增强页面深度感的经典技术，传统实现依赖 JavaScript 监听 scroll 事件并在每一帧计算元素位移。这种方案不仅代码冗长，更因主线程密集计算而容易在低端设备上产生卡顿。CSS Scroll-driven Animations 的成熟为这一问题提供了原生解法 —— 通过声明式样式即可实现高性能视差效果，且代码量可压缩至单个 utility class。

从时间轴到滚动轴：view-timeline 的核心机制

CSS Scroll-driven Animations 的本质是将动画的驱动源从时间轴切换为滚动轴。实现视差的关键在于 view-timeline-name 属性，它创建一个视图进度时间线（View Progress Timeline），其进度由元素在视口中的可见比例决定。

当为容器声明 view-timeline-name: --parallax-tl 时，浏览器开始追踪该元素穿越滚动容器的完整过程：时间线读数为 0% 时元素开始进入视口，100% 时完全离开。view-timeline-axis: block 指定沿块级轴（默认垂直方向）追踪，符合常规页面的滚动方向。

子元素通过 animation-timeline: --parallax-tl 将动画绑定到这一时间线。此时 animation 属性的 auto 时长不再表示秒数，而是由滚动进度决定；linear 确保滚动距离与动画进度呈线性映射；both 则在动画范围外保持首帧和末帧状态。这种声明式绑定使浏览器能够在合成器线程直接处理动画，绕过主线程的 JavaScript 执行开销。

视差算法：速度差与缩放补偿的数学关系

视差效果的视觉原理是让不同层以不同速度移动，从而产生深度错觉。在 CSS 实现中，这一速度差通过关键帧的位移范围控制：

@keyframes parallax {
  from { translate: 0 calc(var(--parallax-offset) * -1%); }
  to   { translate: 0 calc(var(--parallax-offset) * 1%); }
}

默认偏移量 20 表示子元素从 -20% 位移到 +20%，总行程达自身高度的 40%。由于子元素与父容器以不同速率移动，人眼感知到的是前景与背景的分离。

然而位移会暴露空白区域，因此需要缩放补偿。子元素需要足够的 "出血" 空间来覆盖位移范围，其缩放比例遵循公式：scale = 1 + offset × 2 / 100。当偏移量为 20 时，子元素渲染为 140% 大小，上下各预留 20% 的缓冲带。父容器的 overflow: hidden 裁剪多余部分，确保任何位移位置下都不会出现空白。

这一设计的优雅之处在于单一 CSS 变量 --parallax-offset 同时控制位移幅度和缩放比例，调整一个值即可改变视差强度而无需担心间隙问题。

工程落地：单 Class 实现与渐进增强

完整的视差效果可封装为一个 utility class，便于在项目中复用：

.parallax {
  view-timeline-name: --parallax-tl;
  view-timeline-axis: block;
  overflow: hidden;

  & > * {
    scale: calc(1 + var(--parallax-offset, 20) * 2 / 100);
    animation: parallax auto linear both;
    animation-timeline: --parallax-tl;
    animation-range: cover;
    will-change: translate;
  }
}

使用时仅需为容器添加 class="parallax"，并通过内联样式调整偏移量：<div class="parallax" style="--parallax-offset: 30">。这种实现方式将传统数十行 JavaScript 代码压缩为不到 20 行的 CSS，且无需考虑节流、防抖或 requestAnimationFrame 的调度。

will-change: translate 作为性能提示，告知浏览器提前将元素提升为独立图层，避免滚动过程中的重排开销。

可访问性与降级策略

视差效果属于运动动画，应尊重用户的减少动画偏好。通过 prefers-reduced-motion 媒体查询可在用户启用该设置时禁用动画：

@media (prefers-reduced-motion: reduce) {
  .parallax > * {
    animation: none;
    scale: 1;
  }
}

浏览器支持方面，Scroll-driven Animations 目前已在 Chrome 115+ 和 Edge 获得完整支持，Firefox 和 Safari 仍在实现中。对于不支持该特性的浏览器，建议采用渐进增强策略：基础样式确保内容正常显示，视差效果作为增强层存在而非必需。若需更广泛的兼容性，可配合 @supports 查询提供 JavaScript 降级方案，但保持 CSS 优先的实现路径。

资料来源

• dan-webnotes: CSS-native parallax effect
• MDN: Scroll-driven animation timelines

web-performance