提前思考CSS Scroll Snap Points
CSS最近介绍了一个关于scroll snap points的新功能，为触控以及输入设备的用户提供一个流式、精确的滚动体验。
关于创建scroll snap效果，有许多jquery插件可供你选择，但是我们今天所讲述的不是通过安装一个插件来控制滚动的行为，而是使用原生的CSS scroll snap points来实现。
Scroll Snap Points工作原理
通过在x以及y轴上定义“snap points”来控制滚动容器的滚动行为。当用户在水平或者垂直方向滚动时，利用捕捉点，滚动容器会捕捉到内容区域的某一点。
水平捕捉点
创建一个可滚动的图片画廊，用户可以滚动或滑动每幅图片。代码结构如下:
<div class="gallery">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
</div>
首先，创建一个水平的滚动容器，在div.gallery容器上定义了overflow以及white-space样式:
.gallery {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
width: 1000px;
}
img {
width: 100%;
}
代码中的.gallery代表滚动容器；内部的水平滚动视窗大小为1000px。
接下来，我们先来认识几个定义水平scroll snap points的相关属性。
scroll-snap-points-x
scroll-snap-points-x属性用来设置滚动容器内部水平的snap点。定义和.gallery一样宽度的捕捉点，用户可以滚动并且捕捉每一个图片:
.gallery {
...
width: 1000px;
scroll-snap-points-x: repeat(1000px);
}
x轴设置捕捉点值为repeat(1000px),始于0px并重复于1000px区间内，也就是滚动容器的宽度。现在需要启动捕捉点了。
scroll-snap-type
scroll-snap-type属性用于启动滚动容器内所有的捕捉点。使用这个属性定义滚动容器内捕捉点的使用类型以及执行方式。
精确获取画廊中每一个滚动图片的捕捉点:
.gallery {
...
scroll-snap-type: mandatory;
}
mandatory属性确保滚动操作完成时，内容区域总是可以位于捕捉点。也就是说，每1000px，div.gallery就会scroll-snap到一点。
水平流式捕捉点
也可以使用百分比来定义流式捕捉点。如，我们将滚动容器的宽度设为90%，并且scroll-snap-points-x设置为repeat(100%)。
.gallery {
...
width: 90%;
scroll-snap-points-x: repeat(100%);
scroll-snap-type: mandatory;
}
将捕捉点沿x轴设置，始于0px并重复于滚动容器100%的宽度区间内。
垂直流式捕捉点
创建垂直捕捉点，我们将滚动容器的overflow-y设置为auto,overflow-x设置为hidden:
.gallery {
overflow-y: auto;
overflow-x: hidden;
width: 90%;
height: 48vw;
}
scroll-snap-points-y
使用scroll-snap-points-y属性，设置滚动容器内部垂直的捕捉点。既然滚动容器有一个流式高度，我们可以沿y轴设置捕捉点，始于0px，重复于滚动容器100%高度区间内:
.gallery {
...
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(100%);
}
接下来，使用更多的scroll-snap属性设置垂直滚动容器内的对齐方式:scroll-snap-coordinate以及scroll-snap-destination。
scroll-snap-coordinate
在垂直滚动容器内将每一张图片水平居中,这时可以使用scroll-snap-coordinate属性，并将值设置为50% 50%(center):
img {
...
scroll-snap-coordinate: 50% 50%;
}
scroll-snap-destination
scroll-snap-destination属性定义了滚动容器内的位置 - 定义的所有捕捉点的对齐方式。将每一个捕捉点与.gallery容器的中心对齐，需要将值设置为50% 50%(center)：
.gallery {
...
scroll-snap-points-x: repeat(100%);
scroll-snap-type: mandatory;
scroll-snap-destination: 50% 50%;
}
浏览器的支持
目前为止，浏览器对CSS scroll snap points的支持限制在IE10+以及Firefox 39+。但是Safari 9好像也即将对其支持，你也可以在Chrome Candry内开启scroll snap points，Chrome浏览器允许在支持一些边缘属性前对其进行测试。
查看浏览器对scroll snap points的兼容性表格，获取浏览器的最新支持。
总结
一旦浏览器可以稳定的支持CSS scroll snap points属性时，对于触控设备产生的意义将十分重大。如，我们可以在next/previous之间快速查看画廊中的每一张图片。
使用CSS创建scroll snap points意味着不再需要使用JavaScript或者导入一个多余的库定义滚动行为。并且scroll snap points属于硬件加速，保证了可以在浏览器中平滑的执行。
本文根据@Guil Hernandez的《Thinking Ahead: CSS Scroll Snap Points》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处:http://blog.teamtreehouse.com/css-scroll-snap-points。
如需转载，烦请注明出处：https://www.fedev.cn/css3/css-scroll-snap-points.htmlnike air max 2019 footlocker