视差滚动2｜关于CSS新属性 @scroll-timeline

我正在参加「掘金·启航计划」

上一篇的视差滚动实现了一种视觉上的视差，即近大远小的效果，而很多炫酷的页面里，我们实际想要的效果是——滚动指示器，以往实现这种效果需要借助javascript，通过监听dom事件来获取页面滚动的位置。

在2021CSS发展状态相关报告中，有这样一个属性，scroll-timeline已经可以实现这种效果。

基本用法

@scroll-timeline滚动时间线，能够设定一个动画的开始和结束由容器的滚动进度条控制，而不是时间控制。

用法：定义一个@scroll-timeline规则

@scroll-timeline moveTimeline {
  source: auto;
  orientation: vertical;
  scroll-offsets: 0px, 500px;
}

参数设置

• source：滚动位置驱动时间线进度的可滚动元素（滚动容器）
  • auto：（默认）与Document当前全局Window 对象相关联。
  • selector("id-selector")：由元素的 id 标识的滚动容器。
  • none：未指定滚动容器。
• orientation：滚动时间轴的方向。
  • auto：默认为vertical
  • block：使用沿块轴的滚动位置，符合书写模式和方向性。
  • inline：使用沿内联轴的滚动位置，符合书写模式和方向性。
  • horizontal：使用水平滚动位置，与书写模式或方向无关。
  • vertical：使用垂直滚动位置，与书写模式或方向无关。
• scroll-offsets：确定滚动时间线的滚动偏移量，设定在滚动的什么阶段，触发动画，可通过三种方式之一进行设置：
  • none：未指定滚动偏移量。
  • <length-percentage>：- 由逗号分隔的值列表确定。每个值都映射到animation-duration。例如，如果 ananimation-duration 设置为 2s 且滚动偏移量为 0px, 30px, 100px，则在 1s 时，滚动偏移量将为 30px。
  • <element-offset>：确定滚动偏移量的方法是使用元素偏移量。这意味着可以指定页面内的元素，其位置决定了滚动时间线以及要使用这些元素的哪个边缘。指定元素是使用 selector() 函数完成的，该函数接收元素的 id。边缘由关键字 start 或确定 end。可选的阈值的 0–1 可用于表示元素滚动中预期可见的百分比。

用法

创建好@scroll-timeline规则后，可通过animation-timeline将其和动画绑定起来。

@scroll-timeline moveTimeline {
  source: selector("#g-content");
  orientation: vertical;
  scroll-offsets: 0px, 500px;
}
div {
    animation-name: move;
    animation-duration: 3s;
    animation-timeline: moveTimeline;
}
@keyframes move{
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(100%, 0);
    }
}

示例：实现一个横向滚动条

浏览器兼容性

在最新的 chrome、Edge、Opera 可以通过浏览器配置开启该特性，Chrome 下开启该特性需要：

1、浏览器 URL 框输入 chrome://flags；
2、开启 #enable-experimental-web-platform-features。