根据 CSS Scroll Snap Module Level 1 规范,CSS 新增了一批能够控制滚动的属性,让滚动能够在仅仅通过 CSS 的控制下,得到许多原本需要 JS 脚本介入才能实现的美好交互。
Tips:本文截的一些 Gif 图涉及容器滚动,效果不是很好,可以点进 Demo 里实际感受下。
sroll-snap-type
首先看看 sroll-snap-type
可能算得上是新的滚动规范里面最核心的一个属性样式。
scroll-snap-type:属性定义在滚动容器中的一个临时点(snap point)如何被严格的执行。
光看定义有点难理解,简单而言,这个属性规定了一个容器是否对内部滚动动作进行捕捉,并且规定了如何去处理滚动结束状态。
语法
{
scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]?
}
举个例子,假设,我们希望一个横向可滚动容器,每次滚动之后,子元素最终的停留位置不是尴尬的被分割,而是完整的呈现在容器内,可以这样写:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
ul {
scroll-snap-type: x mandatory;
}
li {
scroll-snap-align: center;
}
上面 scroll-snap-type: x mandatory
中,x
表示捕捉 x 轴方向上的滚动,mandatory
表示强制将滚动结束后元素的停留位置设置到我们规定的地方。
左边是正常滚动容器的写法,右边是添加了 s