scroll-snap-type 必须写在滚动容器（如 main、.scroll-container 或 html）上，而非 section 或 item 等子元素；容器需满足：100vh/100vw 尺寸、overflow 为 auto/scroll 且非 hidden、内容总高度大于容器高度；scroll-snap-align 决定子元素哪一端对齐视口边界；ios safari 的 mandatory 非绝对强制，需真机测试并配合 js 修正。
scroll-snap-type 必须写在滚动容器上，不是 section 或 item
绝大多数失效案例，都是把 scroll-snap-type: y mandatory 错写在了 section、.slide 或 .item 这类子元素上。它只对**滚动容器本身**生效，比如 main、.scroll-container，甚至 html（TikTok 风格必须用 html）。DevTools 里能看到声明，但 computed styles 中 scroll-snap-type 值为空或不计算——这就是写错位置的明确信号。
容器必须同时满足三个硬性条件
缺一不可，否则 scroll-snap 完全不触发：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
height: 100vh（垂直）或width: 100vw（水平）——定义视口级尺寸 -
overflow-y: auto或overflow-y: scroll（垂直）；overflow-x: auto（水平）——不能是hidden，也慎用scroll（部分 Android WebView 兼容差） - 内容总高度 > 容器高度（即真实可滚动）——仅靠
height: 100vh不够，必须有多个section叠加超出
scroll-snap-align 的取值决定吸附基准点
它不是“居中显示”，而是指定子元素哪个边缘/中心“贴住”容器视口边界：
-
scroll-snap-align: start→ 子元素**顶部**对齐容器顶部（适合首屏对齐、分节页） -
scroll-snap-align: center→ 子元素**中心**对齐容器中心（适合横向轮播、卡片居中展示） -
scroll-snap-align: end→ 子元素**底部**对齐容器底部（极少单独使用） - 子元素若有
margin或padding，会参与对齐计算，易偏移；建议统一设box-sizing: border-box并清空默认边距
iOS Safari 的 mandatory 并不真正“强制”
快速滑动后松手，Safari 可能停在两个吸附点之间——这不是 bug，是 WebKit 对滚动惯性的主动妥协。尤其当 section 高度不一致时更明显。若需绝对精准停靠：
- 确保所有子元素高度严格一致（如都用
height: 100vh，不用min-height） - 避免在
position: sticky或含transform的父容器里嵌套 scroll-snap - 真机测试必不可少；模拟器常表现过度理想
- 必要时配合
scroll-behavior: smooth和scrollend事件做 JS 修正（注意：旧版 Safari 不支持scrollend）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
