滚动容器必须显式设置 overflow-y 和 height；正确做法是用包裹元素并设 height: 100vh、overflow-y: auto、scroll-snap-type: y mandatory（含 -webkit 前缀），分屏区块统一设 scroll-snap-align: center 且高度一致。
滚动容器必须显式设置 overflow-y 和 height
很多人直接给 或 加 scroll-snap-type，结果完全没反应——因为 CSS 滚动吸附只对「自身触发滚动」的容器生效，而 body 的滚动由浏览器接管，不受 CSS snap 控制。
正确做法是用一个包裹元素，比如 <main class="snap-container"></main>，并确保它满足两个硬性条件：
-
height: 100vh（不能用min-height，否则 Safari 可能不识别 snap 区域） -
overflow-y: auto或overflow-y: scroll（auto更稳妥，避免空滚动条） - 必须加
scroll-snap-type: y mandatory和-webkit-scroll-snap-type: y mandatory（Safari 必须带前缀）
分屏区块要统一设 scroll-snap-align: center
每个全屏区域（如 <section></section>）必须单独设置吸附方式。用 start 看似合理，但实际会受书写模式、scroll-padding-top 干扰，导致吸附偏移或失效。
最通用且兼容性最好的写法是：
- 所有分屏元素统一加
scroll-snap-align: center - 同时确保它们高度一致（推荐
height: 100vh） - 避免混用
start/end/center，否则吸附逻辑冲突，快速滑动时容易卡在中间 - 若需顶部精准对齐（如锚点跳转），再额外加
scroll-margin-top: 0，而不是改align
移动端 Safari 的 scroll-snap 表现不稳定
iOS 14+ 支持 scroll-snap，但 Safari 对 mandatory 的实现策略是「优先保流畅，降低吸附强度」。真机测试常出现滑动后停不住、吸附延迟、甚至跳过目标区域。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
必须做的几件事：
- 滚动容器加
-webkit-scroll-snap-type: y mandatory和scroll-snap-type: y mandatory - 每个分屏块加
-webkit-scroll-snap-align: center和scroll-snap-align: center - 禁用
overscroll-behavior: contain（它会直接禁用 snap 的惯性吸附） - 加
scroll-behavior: smooth缓解突兀感，但它只是锦上添花，不能替代 snap
内容被截断或滚动条消失？检查 overflow-x 和父级尺寸链
常见错误现象：滚动区域内容显示不全、右侧/底部被切掉、滚动条突然不出现。
原因往往不在 scroll-snap 本身，而是尺寸和溢出控制链断裂：
- 父容器未设
width或max-width，导致子内容撑开、横向溢出被隐藏 - 忘记设
overflow-x: hidden，横向滚动干扰纵向吸附 - 嵌套了 flex 或 grid 容器，但未给滚动容器设
flex: none或align-self: flex-start，导致高度塌陷 - 使用了
transform或position: absolute的兄弟元素，影响了滚动容器的布局流
最简单的验证方式：临时加 outline: 2px solid red 到滚动容器，看它的实际渲染尺寸是否符合预期。尺寸不对，一切 snap 都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
