Scroll Snap Points

实战CSS Scroll Snapping

如果考虑周全,滚动捕捉可以是一个有用的设计工具。CSS Scroll Snap Points允许你连接到浏览器的本机滚动交互,因此你的界面感觉无缝且平滑。随着JavaScript API的出现,这些功能将变得更加强大。CSS Scroll Snap(CSS 滚动捕捉)允许你在用户完成滚动后多锁定特定的元素或位置。

改变用户体验的滚动新特性

@evilmartians的《滚动的特性》一文介绍了目前有关于滚动相关的特性。今天我想花点时间重新整理一下,时至今日,CSS中为浏览器滚动提供的相关新特性究竟能给用户带来哪些新的体验。

提前思考CSS Scroll Snap Points

CSS最近介绍了一个关于scroll snap points的新功能,为触控以及输入设备的用户提供一个流式、精确的滚动体验。关于创建scroll snap效果,有许多jquery插件可供你选择,但是我们今天所讲述的不是通过安装一个插件来控制滚动的行为,而是使用原生的CSS scroll snap points来实现。

CSS Scroll Snap Points简介

介绍这个新CSS属性之前,我想要先讲一下使用JavaScript实现的一个功能—— 将一个元素锁定在滚动视窗之中。众所周知,使用JavaScript实现滚动的行为还是有些难度的。CSS Scroll Snap Points 新规范指出你仅仅使用几行简单的CSS代码就可以实现以上所述的功能。新出现的Web技术总是在不断的变化之中,这个规范也处于不断的修改之中。也存在“旧的”与“新的”属性与值。随着浏览器的不断地支持,这个新属性的前景还是不错哒~ 在规范处于中间的阶段,我将带你们获取浏览器对其最大的支持性。

返回顶部