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（滚动停止时，必须吸附到可见视口的吸附位置）