scroll-snap-type 不生效是因为未满足显式可滚动容器的硬性条件：必须作用于非根元素的固定尺寸容器（如.height: 100vh）、设置overflow-y: scroll、子元素为直接子项且设scroll-snap-align: start，禁用margin和transform等干扰属性。
scroll-snap-type 是目前最轻量、最原生的全屏滑动翻页方案，不需要 JS 就能工作，但必须满足几个硬性条件，否则它根本不会触发。
为什么 scroll-snap-type 不生效？
不是写上就管用，浏览器只对「显式可滚动容器」应用 snap 行为。常见失效原因：
-
body或html上直接写scroll-snap-type: y mandatory—— 失效，因为默认滚动由html承担，但它通常没有溢出，不被视为可滚动容器 - 子
section高度用min-height: 100vh或靠内容撑开 —— 失效，snap 需要明确的、固定的停靠锚点 - 给
section加了margin-top—— 锚点偏移，视觉停靠位置和实际offsetTop不一致 - 没设
overflow-y: scroll（或auto）在容器上 —— 浏览器不认为它需要 snap
scroll-snap-type 正确结构怎么写？
必须新建一个包裹层，显式控制滚动行为：
<div class="scroll-container"> <section class="page">第一屏</section> <section class="page">第二屏</section> <section class="page">第三屏</section> </div>
CSS 中关键四行不能少：
.scroll-container { height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory; }.page { height: 100vh; scroll-snap-align: start; }html, body { margin: 0; padding: 0; height: 100%; }- 移动端加
.scroll-container { overscroll-behavior-y: contain; touch-action: pan-y; }
横向滑动翻页怎么配？
左右滑动本质一样，只是把 y 换成 x，但要注意防误触干扰：
立即学习“前端免费学习笔记（深入）”；
.scroll-container { overflow-x: auto; scroll-snap-type: x mandatory; white-space: nowrap; }.page { display: inline-block; width: 100vw; scroll-snap-align: start; }- 必须加
touch-action: pan-y—— 否则 iOS Safari 会拦截横向 touchmove，默认只允许纵向滚动 - 隐藏滚动条需分写：
::-webkit-scrollbar { display: none; }+scrollbar-width: none;（Firefox）
哪些地方最容易被忽略？
不是兼容性差才不用 scroll-snap-type，而是细节一错就彻底静默失效：
-
scroll-snap-align必须带值（start/center），只写属性名无效 -
section不能用flex或grid布局拉伸高度 —— 它必须是“自己撑满”，而不是被父容器分配空间 - Safari 15.4 之前不支持
mandatory，降级用proximity时吸附感弱，且无法保证每次停准 - 键盘方向键、空格键、PageDown 等原生滚动操作默认触发 snap，但
scrollTo()不会自动对齐 —— 如需 JS 控制，得配合scroll-behavior: smooth+ 手动计算scrollLeft/scrollTop
