CSS滚动式式运动偏爱

快速浏览要点：

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

结合 prefers-reduced-motion 使用 CSS Scroll-Timeline

我唯一要补充的是，需要考虑 prefers-reduced-motion 属性，因为这种滚动动画可能会影响容易晕动的人。为此，您可以将测试与 JavaScript 中的支持测试结合在同一行：

if (
    !CSS.supports("animation-timeline: foo") && 
    !window.matchMedia('(prefers-reduced-motion: reduce)').matches
   ) {
     // 执行炫酷效果
}

我不确定最好是测试无偏好设置还是 reduce 的反面。无论哪种方式，CSS 中的技巧是将您要使用 @scroll-timeline 和 animation-timeline 执行的任何操作都包装在 @supports 测试中（如果您想执行其他操作），然后将 该测试 包装在偏好设置测试中：

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

    @supports (animation-timeline: works) {

      /* 执行炫酷效果 */

    }

}

这是一个演示，所有功劳都归于 Bramus，是他让这一切得以实现。

哦，你知道吗？如果 @when 成为一项功能，CSS 会变得更简洁：

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

} @else {

}

以上是CSS滚动式式运动偏爱的详细内容。更多信息请关注PHP中文网其他相关文章！