scroll-snap-type: y mandatory 是实现全屏翻页的核心，但必须配合容器高度（如100vh）、子项高度（严格100vh）、overflow-y: scroll 和 scroll-behavior: smooth 才能生效；常见失效原因是父容器或子项不满足这些触发条件。
scroll-snap-type: y mandatory 是实现全屏翻页的核心，但仅靠它不会生效——必须配合容器高度、子项高度、溢出控制和 scroll-behavior 才能真正“卡住”。
为什么设置了 scroll-snap-type 却没反应？
常见原因不是语法写错，而是父容器或子项不满足触发条件：
- 父容器（如
）必须设置height: 100vh或明确高度，且overflow-y: scroll（不能是auto或未声明） - 每个翻页区域（如
）必须是直接子元素，且高度严格等于容器高度（推荐height: 100vh） - 父容器需加
scroll-behavior: smooth，否则 snap 是硬切，体验像跳帧 - 移动端 Safari 要求父容器有
-webkit-overflow-scrolling: touch（iOS 12+ 已非必需，但旧版本仍需）
如何让翻页只响应鼠标滚轮，禁用拖拽滚动？
原生 scroll-snap 无法禁止拖拽，但可通过 CSS + JS 组合限制：
- CSS 层面：给父容器加
touch-action: none（禁用触摸拖拽），再用overscroll-behavior-y: contain阻止滚动穿透 - JS 层面：监听
wheel事件，event.preventDefault()后手动scrollTo()到最近的 snap 点（注意节流，避免连滚触发多次） - 关键点：不要监听
touchmove并阻止——这会彻底禁用所有触摸交互；应只在wheel和keydown（方向键）时接管
scroll-snap-align 和 scroll-snap-stop 怎么选？
scroll-snap-align 控制对齐方式，scroll-snap-stop 控制是否强制停驻：
- 全屏翻页统一用
scroll-snap-align: start（子项顶部对齐容器顶部），不要混用center或end -
scroll-snap-stop: always可防止快速滚动时跳过某一页（尤其在 macOS 惯性滚动下），但兼容性略差（Firefox 68+、Chrome 95+） - 若需兼顾老浏览器，优先保证
scroll-snap-align+scroll-snap-type基础组合，scroll-snap-stop当作增强项
最易被忽略的是 scroll-snap 的“惰性”：它只在用户主动滚动结束时生效，不会干预 JS scrollTo() 或初始定位。如果页面加载后需要默认停在第一页，得手动触发一次 scrollTo({ top: 0, behavior: 'smooth' })，否则可能因渲染时机问题卡在中间位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
