使用 sroll-snap-type 优化滚动

桃扇骨 2022-11-15 14:08 261阅读 0赞

## 本文转自公众号：iCSS前端趣闻。慕课网推出 CSS 架构课程，一节课解决 CSS 难复用、难维护、难扩展问题（[点我][Link 1]）。 ##

根据 CSS Scroll Snap Module Level 1\[1\] 规范，CSS 新增了一批能够控制滚动的属性，让滚动能够在仅仅通过 CSS 的控制下，得到许多原本需要 JS 脚本介入才能实现的美好交互。

> Tips：本文截的一些 Gif 图涉及容器滚动，效果不是很好，可以点进 Demo 里实际感受下。

## sroll-snap-type ##

首先看看 `sroll-snap-type` 可能算得上是新的滚动规范里面最核心的一个属性样式。

**scroll-snap-type\[2\]**：属性定义在滚动容器中的一个临时点（snap point）如何被严格的执行。

光看定义有点难理解，简单而言，这个属性规定了一个容器是否对内部滚动动作进行捕捉，并且规定了如何去处理滚动结束状态。

### 语法 ###

{
        scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]?
    }

举个例子，假设，我们希望一个横向可滚动容器，每次滚动之后，子元素最终的停留位置不是尴尬的被分割，而是完整的呈现在容器内，可以这样写：

ul {
        scroll-snap-type: x mandatory;
    }
    
    li {
        scroll-snap-align: center;
    }

上面 `scroll-snap-type: x mandatory` 中，`x` 表示捕捉 x 轴方向上的滚动，`mandatory` 表示强制将滚动结束后元素的停留位置设置到我们规定的地方。

左边是正常滚动容器的写法，右边是添加了 `scroll-snap-` 之后：

![图片][078845021cbcd3c15ecc82d49e15c4bf.gif]

scrollsnaptypeh

如果是 y 轴方向的滚动也是一样的，只需要简单改一下 scroll-snap-type：

ul {
        scroll-snap-type: y mandatory;
    }

![图片][674b6627c20afb0f61e844429a7a1122.gif]

scrollsnaptypeh2

CodePen Demo -- CSS Scroll Snap Demo\[3\]

### scroll-snap-type 中的 mandatory 与 proximity ###

`scroll-snap-type` 中的另外一个重点就是 mandatory 与 proximity。

*  mandatory: 通常在 CSS 代码中我们都会使用这个，mandatory 的英文意思是**强制性的**，表示滚动结束后，滚动停止点一定会强制停在我们指定的地方
 *  proximity: 英文意思是**接近、临近、大约**，在这个属性中的意思是滚动结束后，滚动停止点可能就是滚动停止的地方，也可能会再进行额外移动，停在我们指定的地方

也就是说，如上指定了 `scroll-snap-type: y proximity` 的滚动容器，如果不额外设置 `scroll-snap-margin`/`scroll-snap-padding`，是有可能停在下面这样~尴尬~的位置：

![图片][d37dcaadb3b57a13315dbeccb382c02c.png]

image

### scroll-snap-type: both mandatory ###

当然，还有一种比较特殊的情况是，`scroll-snap-type: both mandatory`，表示横向与竖向的滚动，都会同时进行捕捉，也是可以的：

![图片][5012b51a7e775e011685d9029e7e5d3b.gif]

CodePen Demo -- CSS Scroll Snap Both mandatory Demo\[4\]

## scroll-snap-align ##

使用 `scroll-snap-align` 可以简单的控制将要聚焦的当前滚动子元素在滚动方向上相对于父容器的对齐方式。

其需要作用在父元素上，可选值有三个：

{
        scroll-snap-align: start | center | end;
    }

什么意思呢，看看示意图：

![20210401172254259.gif][]

ezgif com-video-to-gif

可以类比单个元素在 flexbox 里面的 `justify-content` 属性的 flex-start | flex-end | center，规定当前元素在主轴上相对父容器的对齐方式去理解。

再看看实际的 Demo ，将 `scroll-snap-align` 添加到滚动子容器上：

### scroll-snap-align: start ###

使当前聚焦的滚动子元素在滚动方向上相对于父容器**顶部**对齐。

![图片][e7258b53f2da891f1e82e444abea979f.gif]

scrollsnapalignstart

### scroll-snap-align: center ###

使当前聚焦的滚动子元素在滚动方向上相对于父容器**中心**对齐。

![图片][08bea001d179d5ca78f7259e1ee4aae7.gif]

scrollsnapaligncenter

### scroll-snap-align: end ###

使当前聚焦的滚动子元素在滚动方向上相对于父容器**底部**对齐。

![20210401172254226.gif][]

scrollsnapalignend

CodePen Demo -- CSS Scroll Snap Demo\[5\]

### 不规则子元素滚动 ###

如果子元素大小不一，也能有非常好的表现，使用 `scroll-snap-align: center`，使得不规则子元素在每次滚动后居于容器中间：

![图片][3290b0e2eca3544472ad1c634ea24cfc.gif]

CodePen Demo -- CSS Scroll Snap  不规则子元素滚动 Demo\[6\]

## scroll-margin / scroll-padding ##

上述的 `scroll-snap-align` 很好用，可以控制滚动子元素与父容器的对齐方式。然而可选的值只有三个，有的时候我们希望进行一些更精细的控制时，可以使用 `scroll-margin` 或者 `scroll-padding`

其中：

*  scroll-padding 是作用于滚动父容器，类似于盒子的 padding
 *  scroll-margin 是作用于滚动子元素，每个子元素的 scroll-margin 可以设置为不一样的值，类似于盒子的 margin

举个例子，在竖向滚动下，给滚动父容器添加一个 `scroll-padding-top: 30px` 等同于给每个子元素添加 \`\`scroll-margin-top: 30px\`：

我们希望滚动子元素在 `scroll-snap-align: start` 的基础上，与容器顶部的距离为 30px：

<ul class="snap">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      ...
    </ul>

.snap {
        overflow-x: auto;
        scroll-snap-type: y mandatory;
        scroll-padding-top: 30px;
    }
    
    li {
        scroll-snap-align: start;
    }

![图片][bc0872883202a9990fa99319bc42c308.gif]

scrollsnappadding

总结一下就是，**scroll-snap-align** 可以对滚动之后的对齐方式进行简单控制，而配合 `scroll-margin` / `scroll-padding` 则可以进行精确控制。

## 废弃的 scroll-snap-points-x / scroll-snap-points-y ##

标准的发展过程，早年间的规范如今废除，这个了解一下即可，新标准现在是这几个，并且大部分浏览器已经兼容：

*  scroll-snap-type
 *  scroll-snap-align
 *  scroll-margin / scroll-padding
 *  scroll-snap-stop

![图片][c6932462b39120ef2259825ceb527598.png]

image

> scroll-snap-stop\[7\] 是一个仍处于实验室的标准，本文没有过多介绍，我自己在几个不同浏览器尝试了下，暂时没有发现浏览器支持这个属性，但是最新的标准里面是有关于它的明确的定义的。

## 实际应用，渐进增强 ##

在实际应用中，应用在全屏滚动/广告banner上有很多用武之地：

![20210401172254266.gif][]

CodePen Demo -- full screen scroll\[8\]

当然，兼容性现在还是很大的问题：

![图片][b724002e9c0c98cb2237492c383eeb65.png]

image

不过在很多场景下，就算 `scroll-snap-` 相关几个属性暂不兼容，也不会对正常使用造成影响，所以在很多场景，这些属性都可以直接应用上去，对支持的浏览器提供更好的交互。

## 最后 ##

好了，简单的科普文，本文到此结束，希望对你有帮助 :)

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS\[9\] ，持续更新，欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

### 参考资料 ###

\[1\] CSS Scroll Snap Module Level 1: *https://www.w3.org/TR/css-scroll-snap-1/*

\[2\] scroll-snap-type: *https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-snap-type*

\[3\] CodePen Demo -- CSS Scroll Snap Demo: *https://codepen.io/Chokcoco/pen/ZEYzyeK*

\[4\] CodePen Demo -- CSS Scroll Snap Both mandatory Demo: *https://codepen.io/Chokcoco/pen/oNggdpV*

\[5\] CodePen Demo -- CSS Scroll Snap Demo: *https://codepen.io/Chokcoco/pen/ExaYoZM*

\[6\] CodePen Demo -- CSS Scroll Snap  不规则子元素滚动 Demo: *https://codepen.io/Chokcoco/pen/dyPPqdL*

\[7\] scroll-snap-stop: *https://www.w3.org/TR/css-scroll-snap-1/\#scroll-snap-stop*

\[8\] CodePen Demo -- full screen scroll: *https://codepen.io/Chokcoco/pen/YzPPvBV*

\[9\] Github -- iCSS: *https://github.com/chokcoco/iCSS*

[Link 1]: https://coding.imooc.com/class/501.html
[078845021cbcd3c15ecc82d49e15c4bf.gif]: /images/20221022/004e0c0119ac443fbff42b7c16a8db9e.png
[674b6627c20afb0f61e844429a7a1122.gif]: /images/20221022/62837fe6258545e58f2a1abce8b18fa9.png
[d37dcaadb3b57a13315dbeccb382c02c.png]: /images/20221022/b1fd674dc4f247e194d439166c820928.png
[5012b51a7e775e011685d9029e7e5d3b.gif]: /images/20221022/f9eee2e2eaf340bf95a82adc8dc64f2d.png
[20210401172254259.gif]: /images/20221022/72ae63ae7b2f4459a0d28bc6d2dd9f24.png
[e7258b53f2da891f1e82e444abea979f.gif]: /images/20221022/addbf93c004541c1b5ee395fa7360216.png
[08bea001d179d5ca78f7259e1ee4aae7.gif]: /images/20221022/6374deb993594981ac4147cfc7ec3ada.png
[20210401172254226.gif]: /images/20221022/73d79f5cd011423588e61ca6e85b4554.png
[3290b0e2eca3544472ad1c634ea24cfc.gif]: /images/20221022/5869b47f961d4755910114e80b5eb6df.png
[bc0872883202a9990fa99319bc42c308.gif]: /images/20221022/68042dc47da949a89bfb2bf5d5ee5b75.png
[c6932462b39120ef2259825ceb527598.png]: /images/20221022/8b8e2ded2a9c45b697808be89e70d86a.png
[20210401172254266.gif]: /images/20221022/b2f8c1fbf1944ac0852c90e46f4b4af3.png
[b724002e9c0c98cb2237492c383eeb65.png]: /images/20221022/982e6899c2dc4a68a1241ae78e4fd1af.png