CSS Snap Scroll 滚动贴合特效实现
网页开发发展到现在,特效是越来越多,我们经常可以看到有的网站上边的内容,它们会在鼠标滚动的时候自动贴合到浏览器的顶部或者底部,以前实现这种特效使用的是 JavaScript,现在我们可以使用 CSS 原生属性来设置,并且使用这种方式无论在桌面端还是移动端浏览器上,都能达到操作系统级的滚动贴合效果。
设置滚动贴合
设置滚动贴合需要使用到两个属性:
- 给滚动容器设置 scroll-snap-type,滚动贴合的方向和方式。
- 给滚动的内容设置 scroll-snap-align,滚动贴合的对齐方式。
我们来看一下它们的用法,假设我们有 4 屏的内容需要进行垂直滚动贴合。我们用 main 元素表示滚动的容器,4 个 section 表示要滚动贴合的内容,为了突出重点,我们只看核心代码:
<main>
<section>页面内容1</section>
<section>页面内容2</section>
<section>页面内容3</section>
<section>页面内容4</section>
</main>
每个 section 都设置为占满全屏:
section {
width: 100vw;
height: 100vh;
}
然后把 main 元素的高度设置为 100vh,overflow 为 scroll,来把滚动条设置到 main 元素上:
main {
overflow: scroll;
height: 100vh;
}
之后是关键部分,第一步,我们给 main 元素设置 scroll-snap-type
属性:
main {
scroll-snap-type: y mandatory;
}
scroll-snap-type 需要两个值,第一个值为滚动贴合的方向,y 表示纵向滚动贴合,第二个值为贴合方式,mandatory 表示强制滚动,用户只要一滚动鼠标,下一屏内容就直接滚动上来进行贴合。
第二步,我们需要指定子元素的贴合对齐方式,使用 scroll-snap-align
属性,例如这里把它设置为 start:
section {
scroll-snap-align: start;
}
下一屏的内容会直接贴合到 main 元素顶部,这样滚动贴合就实现了。
贴合结束对齐
如果我们把 section 的高度加长,再把 scroll-snap-align 属性设置为 end,那么滚动时,下一屏内容的底部就会贴合到 main 元素的底部,例如:
section {
height: 150vh;
scroll-snap-align: end;
}