CSS滚动界限点scroll-snap-points

2015-08-24阅读(4570)评论(0)牵着狗狗看MM

苏州实时公交查询

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

有很多Jquery滚动界限插件可供选择(如:scrollifyjquery.panelsnapscrollstop.js)现在我们可以用CSS来添加滚动界限点

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

滚动界限点如何工作?

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

水平界限点

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

[html]<div class="gallery">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
</div>
[/html]

首先,创建水平滚动的容器,我们为定义.gallery 定义overflowwhite-space 样式。、

[css].gallery {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
width: 1000px;
}

img {
width: 100%;
}

[/css]

这段代码中,.gallery就是滚动容器,内容在1000px内滚动。
接下来,设置水平滚动界限点属性。

scroll-snap-points-x

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

[css].gallery {

width: 1000px;
scroll-snap-points-x: repeat(1000px);
}
[/css]

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

scroll-snap-type

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

[css].gallery {

scroll-snap-type: mandatory;
}
[/css]

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

Demo

流体水平界限点

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

[css].gallery {

width: 90%;
scroll-snap-points-x: repeat(100%);
scroll-snap-type: mandatory;
}
[/css]
这个设置的界限点,沿着X轴,从0px开始,并重复在滚动容器宽度的100%的间隔。

horz-scroll-snaps

horz-scroll-snaps

Demo

流体垂直界限点

要创建垂直界限点,需要设置滚动容器overflow-yautooverflow-xhidden

[css].gallery {
overflow-y: auto;
overflow-x: hidden;
width: 90%;
height: 48vw;
}
[/css]

scroll-snap-points-y
scroll-snap-points-y 属性是我们设置的滚动容器内的垂直界限点的定位。由于容器有个流体高度,我们可以设置界限点沿着Y轴,并重复在滚动容器高度的100%的间隔。

[css].gallery {

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

[/css]
接下来,我们使用2个属性来设置这个容器中的对其方式:scroll-snap-coordinatescroll-snap-destination
scroll-snap-coordinate
想要让每张图片对齐到容器的中心,可以设置scroll-snap-coordinate属性为:50% 50%

[css]img {

scroll-snap-coordinate: 50% 50%;
}
[/css]

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

[css].gallery {

scroll-snap-points-x: repeat(100%);
scroll-snap-type: mandatory;
scroll-snap-destination: 50% 50%;
}
[/css]

vertical-scroll-snaps

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/

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » CSS滚动界限点scroll-snap-points
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏