DeathGhost

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

这篇文章发布于 2018年12月02日 23:49 星期日 阅读 821 次,评论 0 条

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 署名-非商业性使用-禁止演绎(CC BY-NC-ND)

用户评论(当前评论共计0条)

⚠️ 评论内容需要审核方可显示。
DeathGhost

孙志锋

视觉前端爱好者

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

4

目录

34

文章

14

评论

世界品牌·洛川红富士

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

💕与君共勉💕