DeathGhost

CSS Scroll Snapping滚动吸附锁定元素或位置

这篇文章发布于2018年12月02日 23:49 星期日。 阅读 85 次 ,由 DeathGhost 编辑,归类于css »

CSS scroll snapping可以使使web滚动吸附锁定到元素片段位置,进而提升用户对页面的视觉体验效果。通过设置该属性可以对XY纵横滚动加以锁定控制,从而使得元素信息更好的展示在用户可视范围内。

CSS通过对容器设置scroll-snap-type及其子元素设置scroll-snap-align属性即可达到控制滚动位置或滚动锁定,使得设计元素信息更完整且友好地展示在用户视觉范围内。

实际应用场景于固定容器范围内对片段式内容进行x、y方位进行滚动定位(移动端全屏式片段、图片列表滚动等等亦或文本型片段信息)。

下面通过简单的动画对scroll-snap*初步了解。

css scroll-snap*
 CSS Scroll Snapping

scroll-snap-type属性可设置x、y纵横滚动轴,上面的例子是对其x轴作以演示,y轴大家可以动手自己测试看效果,这里就不多言了。我们接下来看看其属性值:

scroll-snap-type:none | [ x | y | block | inline | both ] [ mandatory | proximity ]

scroll-snap-align属性则对其子元素进行设置,主要就是对元素的捕获吸附点位置设置,其属性值如下:

scroll-snap-align: [ none | start | end | center ]{1,2}

其他更多属性大家可以参考这里:https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type

由于兼容性的问题,这里就不做深入详述,具体大家可以参考上述地址研究;这里仅做以笔记初步认识,在适当的情况下可以加以利用;相信不久的将来我们就可以更好的应用到PC端与移动端。

DeathGhost

孙志锋

志于道,据于德,依于仁,游于艺。

deathghost@deathghost.cn


web前端设计与开发 - 与其说它是一门职业技术,不如将其视为一门艺术!


本站当前16 篇文章归于4个目录

阿里云ECS

🙏 点击,就是一种鼓励,谢谢你的到访!🙏

💕与君共勉💕