Scroll Snap 参考
核心属性
| 属性 | 取值 | 应用于 |
|---|---|---|
scroll-snap-type | x|y|both + mandatory|proximity | 滚动容器 |
scroll-snap-align | start | center | end | none | 滚动子元素 |
scroll-padding | px | rem | %（简写或各边） | 滚动容器 |
scroll-margin | px | rem | 滚动子元素 |
scroll-snap-stop | normal | always | 滚动子元素 |
overscroll-behavior | auto | contain | none | 滚动容器 |
横向 Scroll Snap（向右滚动）
纵向 Scroll Snap
代码示例
/* Horizontal carousel */
.carousel {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding: 0 16px;
}
.carousel-item {
min-width: 80%;
scroll-snap-align: start;
scroll-snap-stop: always;
}
/* Vertical full-screen sections */
.sections {
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.section {
height: 100vh;
scroll-snap-align: start;
}