大侠,请留步,要不过来了解下CSS Scroll Snap?
一、CSS Scroll Snap简介
CSS Scroll Snap是CSS中一个独立的模块,可以让网页容器滚动停止的时候,自动平滑定位到指定元素的指定位置,包含scroll-*
以及scroll-snap-*
等诸多CSS属性。
注意:
- 虽然Scroll Snap最后的定位效果是平滑的,但是Scroll Snap的作用不是平滑滚动,而是元素定位增强。要想实现平滑滚动,请使用CSS scroll-behavior属性。
- 老的属性是scroll-snap-points-x/scroll-snap-points-y,规范已舍弃,本文不做介绍,本文全程使用新的推荐规范。
二、scroll-snap效果体验
例如,试试水平滚动下面的容器(Chrome 69+,Safari 11+):
可以看到,图片左边缘会和滚动容器的左边缘进行吸附。
这就是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属性,效果就实现了,很简单的吧~
三、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
作用就是确定是水平滚动定位,还是垂直滚动定位。支持的属性值如下:
mandatory
属性值的不同。 您可以狠狠地点击这里:mandatory和proximity对比demo
可以看到差异,左侧的mandatory是不可能像右侧的proximity那样放弃捕捉定位的。这种差异出现在窗口高度较小,比子元素高度还小的场景下。
2. scroll-snap-stop
scroll-snap-stop
表示是否允许滚动容器忽略捕获位置。
其中,支持的属性值:
normal 默认值。可以忽略捕获位置。 always 不能忽略捕获位置。且必须定位到第一个捕获元素的位置。这个属性很有用,可以保证我们每次只能滚动一屏,或者一个指定元素,而不会一下子滚多屏或多个元素,只可惜,根据我的测试,还没有浏览器支持(虽然属性合法,但并无行为发生)。
下面是一个demo,什么时候有效果了告诉我一声!
您可以狠狠地点击这里:scroll-snap-stop不同属性值效果demo
3. scroll-snap-align
scroll-snap-align
是作用在滚动容器子元素上的,表示捕获点是上边缘,下边缘,还是中间位置。
其中,支持的属性值:
none 默认值。不定义位置。 start 起始位置对齐,例如,垂直滚动,子元素和容器同上边缘对齐。 end 结束位置对齐,例如,垂直滚动,子元素和容器同下边缘对齐。 center 居中对齐。子元素中心和滚动容器中心一致。scroll-snap-align
还支持同时使用两个属性值,例如:
scroll-snap-align: start end;
此时,第一个属性值表示block元素排列方向(通常垂直),第二个属性值表示inline元素的排列方向(通常水平)。
三、别走,快结束了
别看上面属性,参数啥的说了那么多,我们实际使用,只需要:
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兼容很好了,什么那种一屏一屏滑来滑去的H5,纯CSS就能搞定了,哇哦,看上去很酷!只可惜,等真到了那个时候,时代不知道已经变成什么样子了,说不定早就不流行这种交互了,严重滞后的规范制定以及浏览器跟进,使得很多很好的想法日后成为过时的糟粕。
怎么办?
要指望CSS Houdini了,开发者自己在浏览器中创建布局或者交互规则,只要规范一出来,我们就在浏览器中自己实现,与时俱进,妙哉妙哉!
转头一看时间,卧槽,失误啊失误!本来计划今天早点睡的,为什么我就管不住我的手呢,又写到现在!为什么?
(本篇完)
觉得可用,就经常来吧! 欢迎评论哦! html5教程,巧夺天工,精雕玉琢。小宝典献丑了!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 大侠,请留步,要不过来了解下CSS Scroll Snap?
本文地址: https://pptw.com/jishu/586720.html