使用 CSS Scroll-Timeline 反向滚动列的笔记

让我快速地做一下

• Mary Lou 发布了一个典型的 Codrops 风格的演示，名为 Alternate Column Scroll。
• 滚动效果由 Locomotive Scroll 提供支持，我们之前 偶然地介绍过它。
• Bramus 一直在探索使用未来的 CSS Scroll-Timeline 功能来实现原生 CSS 滚动效果。他有一个四部分的系列文章深入探讨了它，从这里开始。
• 它还处于 早期阶段，但 @scroll-timeline 已在 Chrome 中标记。Bramus 也向我们展示了这个功能将多么有用，就在 CSS-Tricks 上，尤其是在 与 WAAPI 结合使用时。
• 因此，Bramus 着手重新构建演示的滚动 部分（中间列自然滚动，而外部两列反向滚动）。事实证明，您可以 使用 polyfill 并加入一些 WAAPI 来 很好地复制它。很酷。

CSS Scroll-Timeline 与 prefers-reduced-motion

我要补充的唯一一点是，要尊重 prefers-reduced-motion，因为我可以看到这种滚动运动会影响晕动症患者。为此，您可以在 JavaScript 中将测试与支持测试组合在一起。

if (
    !CSS.supports("animation-timeline: foo") && 
    !window.matchMedia('(prefers-reduced-motion: reduce)').matches
   ) {
     // Do fancy stuff
}

我不确定是否最好测试 no-preference 或 reduce 的相反情况。无论哪种方式，CSS 中的技巧是将您要使用 @scroll-timeline 和 animation-timeline 执行的所有操作包装在 @supports 测试中（如果您想做其他事情，请保留），然后将它包装在首选项测试中。

@media (prefers-reduced-motion: no-preference) {

    @supports (animation-timeline: works) {

      /* Do fancy stuff */

    }

}

这是该演示，所有功劳都归功于 Bramus，感谢他让它运行起来。

哦，你知道吗？如果 @when 作为一项功能落地，CSS 会变得更好。

@when supports(animation-timeline: works) and media(prefers-reduced-motion: no-preference) {

} @else {

}