提前思考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属性确保滚动操作完成时,内容区域总是可以位于捕捉点。也就是说,每1000pxdiv.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

静子

在校学生,本科计算机专业。一个积极进取、爱笑的女生,热爱前端,喜欢与人交流分享。想要通过自己的努力做到心中的那个自己。微博:@静-如秋叶

如需转载,烦请注明出处:http://www.w3cplus.com/css3/css-scroll-snap-points.html

如需转载,烦请注明出处:https://www.w3cplus.com/css3/css-scroll-snap-points.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部