scroll-snap-type没生效是因为滚动容器未满足三个硬性条件：必须有明确高度（如height: 100vh）、可滚动（overflow-y: scroll/auto）且为块级元素（非body/html）；同时子项需设置scroll-snap-align，移动端还需touch-action: pan-y等适配。
scroll-snap-type没生效？先检查滚动容器是否满足三个硬性条件
根本不是属性写错了，而是浏览器压根没把它当“可吸附滚动容器”——scroll-snap-type必须设在**有明确高度 + 可滚动 + 块级**的容器上，body或html上加了等于白写。
-
height: 100vh（不能用min-height，也不能靠内容撑高） -
overflow-y: scroll或auto（hidden禁滚动，visible不触发滚动上下文） - 必须是普通块级元素（比如
<div class="scroll-container">），不能是根元素
常见错误：给body设scroll-snap-type: y mandatory，再套一层section，但没给body加height和overflow——此时滚动仍是根元素行为，scroll-snap完全不介入。
每个section都要显式声明scroll-snap-align
scroll-snap-type只是“开启吸附开关”，真正决定停在哪的是每个子项的scroll-snap-align。只设容器、不设子项，滚动照样滑过不停。
- 全屏垂直滚动用
scroll-snap-align: start（顶部对齐视口） - 若想居中停驻，用
scroll-snap-align: center，但需确保section高度严格为100vh，否则可能错位 - 别用
margin-bottom分隔页面——它会让滚动距离≠视口高度，吸附点偏移；改用min-height: 100vh+box-sizing: border-box - 如果
section内容超长导致自身高度 >100vh，scroll-snap-align: start仍只锚定顶部，用户看到半截内容，此时应加overflow: hidden或限制内部高度
移动端失效？缺这三项就白调
iOS Safari 和现代 Android WebView（Chrome 120+、Samsung Internet 24+）上，scroll-snap要稳定工作，必须同时满足：
立即学习“前端免费学习笔记（深入）”；
- 滚动容器加
touch-action: pan-y（横向轮播则用pan-x），否则系统可能拦截 touch 事件，绕过 snap 逻辑 - 删掉
-webkit-overflow-scrolling: touch（iOS 旧版需要，现代 iOS 已弃用，留着反而冲突） - 每个
section必须是height: 100vh（不能用min-height，也不能靠flex撑高），且不能有transform或will-change干扰布局层
另外，刘海屏/全面屏需加scroll-padding-top: env(safe-area-inset-top)，否则吸附锚点会上移，第一屏顶部被遮挡。
Grid布局里加gap导致最后一行被裁？用负外边距抵消
启用scroll-snap-type: y mandatory后，若父容器用了gap: 1rem，最后一项常被截断——浏览器会在最后一项后硬留一个gap高度，导致整体超出视口。
- 解决方案：设
gap: 1rem的同时，给容器加margin: -0.5rem（即-gap/2） - 确保父级没设
overflow: hidden或border，否则负 margin 会被裁剪 - 别用
padding替代gap——padding不参与fr计算，但会挤占内容区宽度
真正麻烦的不是写法，而是所有条件必须同时成立：容器高度、滚动态、子项对齐、触控策略、安全区适配——漏一项，用户手指一划就滑到底，根本停不住。
