现代 CSS

Scroll Snap Points

图解CSS:CSS滚动捕捉(Part2)

图解CSS:CSS滚动捕捉这一章节分成两个部分,第一部分主要介绍了 CSS 滚动捕捉理论方面的知识,详细介绍了 CSS 滚动捕捉中的 scroll-snap-typescroll-snap-alignscroll-marginscroll-padding 以及 scroll-snap-stop 等属性。并且通过一些示例向大家展示了它们怎么使用。在第二部分,也就是接下来的内容中,从简单的示例着手(有些示例在第一部分也出现过),慢慢过渡到复杂的示例,比如模拟 iOS列表向左滑动的交互效果。如果你感兴趣的话,请继续往下阅读。

图解CSS:CSS滚动捕捉(Part1)

CSS 滚动捕捉是 W3C 中 CSS Scroll Snap Module Level 1 模块,可以用来创建一个可滚动的容器,可用来替代以往依赖 JavaScript 脚本来创建滑块组件。也就是说,使用该特性(CSS 的滚动捕捉特性)是快速将元素制作成可滚动容器的一种简单快速的方法。另外,CSS 滚动捕捉特性还可以帮助我们给用户更好的体验。接下来和大家一起来探讨这个 CSS 新特性,即 CSS 滚动捕捉。

实战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技术总是在不断的变化之中,这个规范也处于不断的修改之中。也存在“旧的”与“新的”属性与值。随着浏览器的不断地支持,这个新属性的前景还是不错哒~ 在规范处于中间的阶段,我将带你们获取浏览器对其最大的支持性。

返回顶部