关键在于设置 overflow: hidden 和处理滚动惯性干扰；需确保容器有 height、overflow-y: scroll、scroll-snap-type: y mandatory，子项设 scroll-snap-align: start，并加 scroll-behavior: smooth 防生硬跳转。
用 scroll-snap-type 做全屏幻灯片，关键不是“能不能”，而是“要不要加 overflow: hidden 和处理滚动惯性干扰”——多数失败都卡在这两点。
为什么 scroll-snap-type 滚不到下一页？
常见现象：页面能滚动，但松手后不自动对齐到下一个全屏区块，甚至直接滑过。根本原因通常是父容器未满足滚动捕捉生效前提：
- 必须设置
scroll-snap-type: y mandatory（或x mandatory）在可滚动容器上，且该容器需有明确高度（如100vh）和overflow-y: scroll（不能是auto或visible） - 子项（每张幻灯片）必须设
scroll-snap-align: start（垂直滚动时），且不能被margin、transform或flex的align-items错位干扰 - 若父容器是
body，部分浏览器（尤其 Safari）会忽略scroll-snap，建议改用包裹的<main></main>或<div class="slider"> <h3>如何防止用户拖拽过快导致跳页或卡顿？</h3> <p>原生滚动惯性会让用户快速拖拽时“越过”一个 snap point，触发两次捕捉，造成视觉跳跃。解决思路是限制滚动行为本身：</p> <ul> <li>给滚动容器加 <code>scroll-behavior: smooth，让浏览器接管过渡，而非依赖 JS 模拟 - 禁用默认的 touchmove 惯性干扰：在移动端加
touch-action: pan-y（垂直滚动时），避免被识别为手势冲突 - 避免在
scroll事件里做重计算（如实时读取scrollTop并scrollTo），这会破坏原生 snap 流程，反而更卡
兼容性差的典型表现及绕过方式
IE 完全不支持，Safari 15.4 之前对 scroll-snap-stop: always 支持不稳定，Firefox 在 zoom 缩放下可能偏移。务实做法是降级保底：
立即学习“前端免费学习笔记（深入）”；
- 用
@supports (scroll-snap-type: y mandatory)包裹核心样式，确保老浏览器走普通滚动 - 每张幻灯片用
min-height: 100vh而非height: 100vh，防止内容超长时布局崩塌 - 不依赖
scroll-snap-stop实现“禁止跳页”，它目前只有 Chrome 支持较好；真要控制步进，用 JS 监听scrollend事件 +scrollTo锁定位置更可靠
一个最小可用示例（仅 HTML + CSS）
以下代码可直接粘贴测试，注意两个关键点：容器必须显式设高+溢出，子项必须设对齐方式：
<div class="slider">
<section class="slide">Slide 1</section>
<section class="slide">Slide 2</section>
<section class="slide">Slide 3</section>
</div>
<style>
.slider {
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}
.slide {
min-height: 100vh;
scroll-snap-align: start;
}
</style>
别漏掉 scroll-behavior: smooth —— 它不是锦上添花，而是让 snap 动画自然、不突兀的必要条件。没有它，Chrome 下会看到生硬的“咔哒”式跳转。
