📖 CSS Scroll Snap 详解
CSS Scroll Snap 是 CSS 滚动捕捉规范，允许开发者控制滚动容器的对齐行为，让用户体验更加流畅和一致。
核心属性
- scroll-snap-type — 定义滚动容器捕捉的轴方向和严格度。方向：x/y/both/inline/block，严格度：mandatory/proximity
- scroll-snap-align — 定义子元素在滚动视图中的对齐位置（start/center/end）
- scroll-padding — 定义滚动容器边缘的偏移量，避免对齐到边缘
- scroll-margin — 定义子元素边缘的偏移量
- scroll-snap-stop — 控制是否强制每次滚动停在一个捕捉点
应用场景
- 轮播图/幻灯片 — 每张图片对齐到容器
- 水平分页菜单 — 菜单项逐个对齐
- 图片画廊 — 每张图片居中对齐显示
- 横向时间线 — 时间节点依次对齐
- 产品浏览 — 卡片逐个对齐
浏览器兼容性
所有现代浏览器（Chrome 69+、Firefox 68+、Safari 11+、Edge 79+）均已支持 CSS Scroll Snap。