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 完全不触发：

• height: 100vh（垂直）或 width: 100vw（水平）——定义视口级尺寸
• overflow-y: auto 或 overflow-y: scroll（垂直）；overflow-x: auto（水平）——不能是 hidden，也慎用 scroll（部分 Android WebView 兼容差）
• 内容总高度 > 容器高度（即真实可滚动）——仅靠 height: 100vh 不够，必须有多个 section 叠加超出

scroll-snap-align 的取值决定吸附基准点

它不是“居中显示”，而是指定子元素哪个边缘/中心“贴住”容器视口边界：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 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）

实际滚动是否吸附，不看 DevTools 样式面板，而要看松手后是否真的停在区块边界——那才是唯一可信的判断依据。