关于使用CSS滚动时间线构建反向滚动列的方法

• Mary Lou发布了一个典型的Codrops-y演示，叫做Alternate Column Scroll。
• 这个滚动效果是由Locomotive Scroll提供的，我们以前曾巧合地报道过它。
• Bramus使用未来的CSS Scroll-Timeline功能探索本地CSS滚动效果已经有一段时间了。他有一个四段式的文章，从这里开始深入挖掘。
• 现在还为时过早，但@scroll-timeline ，在Chrome领域是有标志的。Bramus还向我们展示了这一功能在CSS-Tricks上是多么的有用，尤其是当它与WAAPI结合时。
• 因此，Bramus开始重新构建演示中的滚动部分（中间一列自然滚动，外面两列反向滚动）。结果发现，你可以对其进行聚填，并撒上一些WAAPI来很好地复制它。酷。

CSS滚动-时间线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，因为他让这个演示得以进行。

哦，你知道吗？CSS变得更漂亮应该 [@when](https://css-tricks.com/proposal-for-css-when/)作为一项功能登陆。

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

} @else {

}