css scroll-snap 本身不提供“预览”功能，仅控制滚动结束时的吸附位置；分块翻页预览需配合 scroll-behavior: smooth、明确容器高度、直接子元素结构、scroll-snap-type 与 scroll-snap-align 正确配对，以及 scroll-padding-top 等细节校准。
直接上结论：CSS scroll-snap 本身不提供“预览”功能，它只控制滚动结束时的吸附位置；所谓“分块翻页预览”，本质是让每个区块（如 <section></section>）在滚动后完整、稳定地居中或对齐视口，而“平滑”靠的是 scroll-behavior: smooth，不是 scroll-snap 自带的。
为什么 scroll-snap 在编辑器里常失效？
HTML 编辑器（比如 CodePen、VS Code Live Server、或内嵌 <iframe></iframe> 预览）本身不干扰 CSS，但常见失效根本原因集中在容器上下文丢失：
- 父容器未设明确高度（
height: 100vh或固定像素），仅靠min-height不触发 snap - 子区块（如
<section></section>）不是滚动容器的**直接子元素**——中间插了<div class="wrapper"> 就会断链 <li>编辑器预览窗口默认无 <code>overflow-y: scroll，必须显式声明，不能依赖 body 滚动 - 部分编辑器（如旧版 VS Code 插件）用 iframe 加载预览，若未设
scrolling="no"或 iframe 内部 body 有 margin，会干扰吸附基准线 - 全屏垂直翻页 →
scroll-snap-align: start（顶部对齐容器顶部） - 图片横向轮播 →
scroll-snap-align: start+ 父容器scroll-snap-type: x mandatory - 想让内容垂直居中吸附？用
scroll-snap-align: center，但需确保子元素高度 ≤ 容器高度，否则 center 会溢出不可见 - 混用
start和end会导致吸附点错乱，尤其在 macOS 触控板惯性滚动下容易跳页 - 必须加在**滚动容器**上（如
.scroll-container），不是 body 或 html - 若编辑器预览中出现“硬切”（无过渡、像跳帧），90% 是漏写了这行，或写了但被其他样式（如
scroll-behavior: auto）覆盖 - 不要给子区块加
transition，scroll-snap不触发重绘，加了也无效 - 移动端 Safari（iOS 16+）对
scroll-behavior: smooth+scroll-snap组合支持良好，但 iOS 14–15 需加-webkit-scroll-behavior: smooth - 用
scroll-padding-top: 0（或具体像素值）校准吸附基准线 - 在 JS 中手动初始化一次：
container.scrollTo({ top: 0, behavior: 'smooth' })，否则依赖渲染时机可能卡在错误位置 - 若编辑器里嵌套了可滚动子区域（如代码高亮框、日志列表），务必加
overscroll-behavior-y: contain，否则滚动会穿透到父容器，破坏分页节奏
scroll-snap-align 必须配 scroll-snap-type 才生效
scroll-snap-type: y mandatory 单独写毫无作用，浏览器直接忽略。每个要吸附的区块必须显式声明锚点：
如何让翻页“平滑”且不卡顿？
“平滑”来自 scroll-behavior: smooth，但它和 scroll-snap 是两个独立机制——前者控制滚动动画过程，后者控制最终停靠点。二者必须共存才有效果：
最易被忽略的细节：初始位置与滚动穿透
页面加载后，滚动容器默认 scrollTop = 0，但若首个区块有 top margin、padding 或伪元素占位，scroll-snap-align: start 会吸附到“可视区顶部”，而非区块顶部——结果就是第一屏永远露半截。
解决方法只有两个：
