scroll-snap-type不生效是因为未满足显式可滚动容器的硬性条件：必须作用于非根元素的固定尺寸容器（如height: 100vh）、设置overflow-y: scroll、子元素为直接子项且设scroll-snap-align: start，禁用margin和transform等干扰属性。
scroll-snap-type 为什么死活不生效
不是代码写错了，而是容器根本没被浏览器识别为“可滚动容器”。scroll-snap-type 只对显式设置了溢出的非根元素起作用，直接写在 html 或 body 上基本无效——因为默认滚动由 html 承担，但它通常没内容溢出，浏览器压根不触发 snap 行为。
必须新建一个包裹层：div.scroll-container，并满足三个硬性条件：
-
height: 100vh（不能用min-height） -
overflow-y: scroll（必须是显式滚动，不是靠 body 溢出） scroll-snap-type: y mandatory
同时，html, body 要清掉默认边距：margin: 0; padding: 0; height: 100%，否则尺寸计算会偏移。
section 高度和对齐必须手动锁定
scroll-snap-align 不是“建议停靠”，而是强制锚点。只要 section 高度不固定、被 flex 拉伸、或依赖内容自适应，浏览器就无法确定停在哪，要么跳过 snap，要么错位停在中间。
每个 section 必须显式设置：
-
height: 100vh（垂直翻页）或width: 100vw（水平翻页） -
scroll-snap-align: start（顶部对齐）或center（居中对齐）——只写scroll-snap-align不加值等于没写 - 禁用
margin-top/margin-bottom，它会改变 offsetTop，导致视觉停靠位置上移/下移
别指望 flex: 1 或 height: 100% 能替代 100vh；viewport 单位才是唯一可靠解。
iOS Safari 上滑动卡顿、回弹、touch 事件失效
移动端最常踩的坑不是样式，而是滚动行为干扰。iOS Safari 默认开启弹性回弹（overscroll），拉到底部时出现空白再回弹，不仅破坏沉浸感，还会让 window.scrollY 在回弹阶段返回异常值，干扰 JS 判断。
关键修复项：
- 在滚动容器上加
overscroll-behavior-y: contain，彻底禁用纵向回弹 - 如果是横向翻页（比如海报画廊），必须加
touch-action: pan-x，否则 iOS 会锁死横向滑动 - 禁止在滚动容器内监听
touchstart或touchmove——哪怕空回调也会触发 passive event warning，拖慢滚动帧率
隐藏滚动条也得按浏览器分写：.scroll-container::-webkit-scrollbar { display: none; }（Chrome/Edge），Safari 则靠 -webkit-overflow-scrolling: touch + overscroll-behavior-y: contain 组合压制。
全屏海报页面要不要加 JS？什么情况下必须加
纯 CSS scroll-snap-type 足够应付基础整屏定位，但一旦需要以下功能，就必须引入 JS：
- 键盘方向键翻页（
keydown监听ArrowUp/ArrowDown） - 滚动到指定页（
scrollTo({ top: n * 100vh, behavior: 'smooth' })） - 当前页高亮、页码指示器同步更新
- 首屏加载后自动滚动到第一页（避免白屏等待）
注意：用 scrollTo 或 scrollBy 时，目标值必须四舍五入到整数（Math.round(n * 100)），否则 subpixel 渲染会导致停不准；监听 scroll 事件务必用 requestAnimationFrame 节流，否则 iOS Safari 容易卡顿。
最易被忽略的一点：所有 scroll-snap 行为都依赖“容器有明确溢出”，而不是“看起来像在滚动”。检查 getBoundingClientRect().height 和 scrollHeight 是否真有差值，比反复调样式更直接。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
