CSS滚动界限点scroll-snap-points-Web前端(W3Cways.com)

CSS最近推出了CSS滚动界限点的功能，给用户提供了流体和精确的滚动体验触控和输入设备。

有很多Jquery滚动界限插件可供选择（如：scrollify，jquery.panelsnap，scrollstop.js）现在我们可以用CSS来添加滚动界限点

（——-本文所有Demo请在IE 10+ 或 Firefox 39版本以上查看——-）

滚动界限点如何工作？

我们可以通过在X轴或者Y轴定义“界限点（snap points）”来控制滚动容器。通过界限点，滚动时，就会滚动到这个水平或者垂直的点。

水平界限点

比方说，我们要创建一个滚动的图片库，用户可以滚动或滑动图片

<div class="gallery">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
  <img src="4.jpg">
</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-x

通过scroll-snap-points-x属性，我们设置了滚动容器的水平界限点。通过定义一个界限点，实现一次滚动一张图片。

.gallery {
  ...
  width: 1000px;
  scroll-snap-points-x: repeat(1000px);
}

repeat(1000px)设置了X轴的界限点（起始0px，间隔1000px，然后重复，即滚动容积的宽度间隔）。接下来，启用界限点。

scroll-snap-type

scroll-snap-type属性可以是所有滚动容器的界限点。我们使用这个属性来定义什么类型的滚动容器应该使用，以及界限点如何严格的被强制执行。
我们想要在滚动的图集中每张图片都有精确的界限点。

.gallery {
  ...
  scroll-snap-type: mandatory;
}

该值必须确保当滚动操作完成时，内容始终在一个界限点上。
换句话说， .gallery在每1000px的点上都会滚动。

Demo

流体水平界限点

我们也可以用百分比值来定义流体界限点。例如，如果我们设置滚动容器的宽度为90%，scroll-snap-points-x设置为repeat(100%)。

.gallery {
  ...
  width: 90%;
  scroll-snap-points-x: repeat(100%);
  scroll-snap-type: mandatory;
}

这个设置的界限点，沿着X轴，从0px开始，并重复在滚动容器宽度的100%的间隔。

horz-scroll-snaps

Demo

流体垂直界限点

要创建垂直界限点，需要设置滚动容器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轴，并重复在滚动容器高度的100%的间隔。

.gallery {
  ...
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(100%);
}

接下来，我们使用2个属性来设置这个容器中的对其方式：scroll-snap-coordinate和scroll-snap-destination。
scroll-snap-coordinate
想要让每张图片对齐到容器的中心，可以设置scroll-snap-coordinate属性为：50% 50%

img {
  ...
  scroll-snap-coordinate: 50% 50%;
}

scroll-snap-destination
scroll-snap-destination property属性定义了容器中的位置;所有界限点会通过我们设定的值对齐。要对其每个单元，可以设置50% 50%

.gallery {
  ...
  scroll-snap-points-x: repeat(100%);
  scroll-snap-type: mandatory;
  scroll-snap-destination: 50% 50%;
}

vertical-scroll-snaps

Demo

浏览器支持

目前，IE10+ 和Firefox 39+是可以支持的。但是Safari 9将会支持，以及Chrome Canary版。
css-scroll-snap-points-support

英文出处：http://blog.teamtreehouse.com/css-scroll-snap-points
参考文章：http://blog.gospodarets.com/css-scroll-snap/