了解下CSS Scroll Snap

一、CSS Scroll Snap简介

CSS Scroll Snap是CSS中一个独立的模块，可以让网页容器滚动停止的时候，自动平滑定位到指定元素的指定位置，包含scroll-*以及scroll-snap-*等诸多CSS属性。

注意：

1. 虽然Scroll Snap最后的定位效果是平滑的，但是Scroll Snap的作用不是平滑滚动，而是元素定位增强。要想实现平滑滚动，请使用CSS scroll-behavior属性。
2. 老的属性是scroll-snap-points-x/scroll-snap-points-y，规范已舍弃，本文不做介绍，本文全程使用新的推荐规范。

二、scroll-snap效果体验

例如，试试水平滚动下面的容器（Chrome 69+，Safari 11+）：

image image image image
image

可以看到，图片左边缘会和滚动容器的左边缘进行吸附。

这就是scroll-snap的作用，可以让你的页面滚动停留在你希望用户关注的重点区域。

上面这个简单的体验效果代码如下：

<div class="scroll-x">
    <img src="./mm.jpg">
    <img src="./mm2.jpg">
    <img src="./mm3.jpg">
    <img src="./mm4.jpg">
    <img src="./mm5.jpg">
</div>

.scroll-x {
    width: 300px;
    scroll-snap-type: x mandatory;
    white-space: nowrap;
    overflow: auto;
}
.scroll-x img { 
    scroll-snap-align: start;
}

容器scroll-snap-type，子元素scroll-snap-align，两个CSS属性，效果就实现了，很简单的吧~

更新于2019-04-19
在Safari iOS浏览器下，根据自己的实践与测试，需要同时设置滚动容器-webkit-overflow-scrolling:touch才有效果。

三、Scroll Snap模块中的CSS属性简介

Scroll Snap模块相关CSS属性可以分为两拨，一拨作用在滚动容器上，一拨作用在你希望有滚动定位点的子元素上。具体参见下表：

其中，作用在容器上的scroll-padding相关属性以及作用在子元素上的scroll-margin相关属性都是用来调整定位点的位置的，与定位效果没有必然关系，本文不做介绍。因此，我们主要看scroll-snap-type，scroll-snap-stop，以及scroll-snap-align这3个属性。

1. scroll-snap-type

scroll-snap-type作用就是确定是水平滚动定位，还是垂直滚动定位。支持的属性值如下：

1. scroll-snap-type
   scroll-snap-type作用就是确定是水平滚动定位，还是垂直滚动定位。支持的属性值如下：

none
默认值。表示滚动时候忽略捕捉点，也就是我们平时使用的滚动。

x
捕捉水平定位点。

y
捕捉垂直平定位点。

block
捕捉和块状元素排列一个滚动方向的定位点。默认文档流下指的就是垂直轴。

inline
捕捉和内联元素排列一个滚动方向的定位点。默认文档流下指的就是水平轴。

both
横轴纵轴都捕捉。

mandatory
mandatory表示“强制”，可选参数。强制定位，无论是添加删除元素，或者滚动窗口较小，不足以放下子元素。

proximity
proximity表示“大约”，可选参数。可能会定位。这个值的作用表现比较玄乎，时间有限，我也没有弄透。大家可以对比下面这个demo，感受和mandatory属性值的不同。

您可以狠狠地点击这里：mandatory和proximity对比demo

可以看到差异，左侧的mandatory是不可能像右侧的proximity那样放弃捕捉定位的。这种差异出现在窗口高度较小，比子元素高度还小的场景下。

mandatory和proximity差异

2. scroll-snap-stop

scroll-snap-align是作用在滚动容器子元素上的，表示捕获点是上边缘，下边缘，还是中间位置。

其中，支持的属性值：

none
默认值。不定义位置。
start
起始位置对齐，例如，垂直滚动，子元素和容器同上边缘对齐。
end
结束位置对齐，例如，垂直滚动，子元素和容器同下边缘对齐。
center
居中对齐。子元素中心和滚动容器中心一致。

三、别走，快结束了

别看上面属性，参数啥的说了那么多，我们实际使用，只需要：

scroll-snap-type: x/y
scroll-snap-align: start/end/center

这几个组合就可以了。

其他一些属性，等以后羽翼丰满再了解也不迟。

虽然目前的兼容性让隔壁小孩都感动哭了，但用在内部实验项目中未尝不可。

对了，Scroll Snap有个polyfill：css-scroll-snap-polyfill

可以让Chrome 63，Firefox 57，Safari 11浏览器都有效果。

Scroll Snap兼容性表

等以后移动端对Scroll Snap兼容很好了，什么那种一屏一屏滑来滑去的H5，纯CSS就能搞定了，哇哦，看上去很酷！只可惜，等真到了那个时候，时代不知道已经变成什么样子了，说不定早就不流行这种交互了，严重滞后的规范制定以及浏览器跟进，使得很多很好的想法日后成为过时的糟粕。

怎么办？

要指望CSS Houdini了，开发者自己在浏览器中创建布局或者交互规则，只要规范一出来，我们就在浏览器中自己实现，与时俱进，妙哉妙哉！

转头一看时间，卧槽，失误啊失误！本来计划今天早点睡的，为什么我就管不住我的手呢，又写到现在！为什么？