现代 CSS

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

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

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

滚动捕捉的实例

前面我们花了较长的篇幅向大家展示了滚动捕捉相关的特性。接下来我们由易到难,来看看 CSS 滚动捕捉能帮我们做哪些事情。接下来会从简单地示例着手,慢慢过渡到更为复杂的用例。

列表滚动

在我们的日常开发中,时常都会碰到列表滚动的效果。比如下图这样的效果:

往往面对这样的需求,开发者都会借助 JavaScript (比如 Swiper )。时至今日,我们就可以使用 CSS 滚动捕捉来实现。为了节约构建 UI 样式时间,我们来实现一个图片列表滚动的效果。先从简单的开始:

<!-- HTML -->
<div class="container">
    <img src="https://picsum.photos/500/300?random=1" alt="" />
    <img src="https://picsum.photos/500/300?random=2" alt="" />
    <img src="https://picsum.photos/500/300?random=3" alt="" />
    <img src="https://picsum.photos/500/300?random=4" alt="" />
    <img src="https://picsum.photos/500/300?random=5" alt="" />
    <img src="https://picsum.photos/500/300?random=6" alt="" />
    <img src="https://picsum.photos/500/300?random=7" alt="" />
</div>

/* CSS */
.container {
    overflow-x: auto;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding: 20px;
}

img {
    scroll-snap-align: start;
}

你将看到下面这样的效果:

注意,示例中我们还使用了 scroll-behavior:smooth; ,它也是用来改善滚动体验的,如果你对该特性感兴趣的话,可以阅读《改变用户体验的滚动新特性》一文。

如果你体验了上面的示例,你会发现,你每次滚动的时候,一不小心可能会同时滚动多张图片。或许这样的效果并不是你所要的,你可能是需要每次滚动两张图片:

实现该效果,可以在第135... 按这样的类推,在滚动项目(即 img )上显式设置 scroll-snap-stop 属性,并取值为 always

img:nth-of-type(2n + 1) {
    scroll-snap-stop: always;
}

体验下面的效果,会有较强的体感:

注意,这个示例中采用了伪类选择器 :nth-of-type(),其中 2n + 1,就是用来获取奇数的 img

还有另外一种场景,也是时常能看到的效果。那就是每次滚动的时候,滚动项目都在滚动容器的中间:

要实现上图这样的效果很简单,我们只需要把滚动项目中的 scroll-snap-align 的设置为 center 即可:

img {
    scroll-
剩余80%内容付费后可查看
返回顶部