css滚动吸附

November 6, 2023

演示

下面的演示只考虑纵向滚动

Scroll Snap

要开启滚动吸附，至少需要在父（滚动）容器上设置 scroll-snap-type 属性（一般还需正确设置 overflow）和在需要吸附的子孙元素上设置 scroll-snap-align 属性

一个简单的示例如下（摘自规范文档）
强调：只有在滚动容器上才能发生滚动吸附效果，最简单的就是 html 元素（只需设置 scroll-snap-type）
设置 scroll-snap-align 的滚动锚点可以是滚动容器的直接子元素和间接子元素（即子孙元素）

css

html {
    scroll-snap-type: block; /* applied to main document scroller */
}
/*prettier-ignore*/
h1, h2, h3, h4, h5, h6 {
    scroll-snap-align: start;  /* snap to the start (top) of the viewport */
}

scroll-snap-type 属性可以声明开启滚动吸附的方向：（默认值 none）可以是 x y 或逻辑方向 inline block 或 both
还可以声明吸附的严格程度：proximity（默认值，让浏览器决定）或 mandatory（滚动停止时，必须吸附到可见视口的吸附位置）

scroll-snap-align 属性声明吸附元素吸附的位置，可取 none start end center，指定双值时分别应用在 block 和 inline 方向

scroll-snap-stop 属性声明滚动容器是否可以越过吸附位置，主要针对触摸屏。normal（默认值）为允许，always 为不允许

scroll-padding 属性声明在滚动容器上，设置滚动内边距。（比如可以用于为导航栏留出空间）

scroll-margin 属性声明在吸附子元素上，设置滚动外边距。

参考

推荐阅读相关文章，有更详细的示例

https://web.dev/articles/css-scroll-snap

https://css-tricks.com/practical-css-scroll-snapping/

https://12daysofweb.dev/2022/css-scroll-snap/

https://codepen.io/collection/KpqBGW

←Back to home