scroll-snap-type不生效最常见的原因是父容器未形成可滚动上下文：既无内容溢出，也未显式设置overflow（如overflow-y: auto）和确定的视口尺寸（如height: 100vh），仅靠min-height或内容撑开无效；同时需确保scroll-snap-align与滚动方向、子元素盒模型及scroll-padding等严格匹配，否则吸附失败。
scroll-snap-type 是现代全屏滚动最轻量、最原生的实现方式，不需要 JS、不依赖插件，但必须注意容器尺寸、滚动方向和对齐行为三者严格匹配，否则会完全失效。
为什么 scroll-snap-type 不生效？
最常见的原因是父容器没有形成可滚动上下文：它既没溢出内容，也没显式设置 overflow 和视口尺寸。
- 父容器必须有
overflow-y: auto（垂直）或overflow-x: auto（水平），不能是visible或未声明 - 高度/宽度必须明确，比如
height: 100vh；仅靠min-height或内容撑开不够 -
scroll-snap-type: y mandatory要求子元素在 y 方向有明确的“起始对齐点”，如果子元素用了margin-top或transform偏移，scroll-snap-align: start就可能捕获失败 - 父容器上若存在
overscroll-behavior: none，可能阻断滚动事件传递，导致 snap 行为被忽略
scroll-snap-align 的取值差异与实际效果
start、center、end 并非指子元素自身位置，而是它相对于父容器滚动端点的对齐策略。实际表现受父容器 scroll-padding 和子元素盒模型影响。
-
scroll-snap-align: start：子元素的上边界（垂直）或左边界（水平）对齐父容器滚动起始边缘（通常是顶部或左侧） -
scroll-snap-align: center：子元素中心对齐父容器可视区域中心——适合卡片居中展示，但需确保父容器height稳定，否则中心计算漂移 -
scroll-snap-align: end：下/右边界对齐，常用于倒序布局或底部锚定，但容易因父容器padding-bottom失效 - 多个子元素可混合使用不同
scroll-snap-align，比如首屏start，末屏end，中间用center
如何让滚动“卡住”一屏且禁用中间停顿？
mandatory 模式理论上强制捕捉，但浏览器仍可能因惯性滚动或触摸板滑动过快而短暂越过目标位置。这时要叠加防穿透和过渡控制。
- 父容器加
overscroll-behavior-y: contain（或x），防止滚动穿透到 body 导致意外回弹 - 启用
scroll-behavior: smooth时，只加在父容器上，不要加在html元素——否则全局平滑会干扰 snap 的“瞬停感” - 避免在子元素上写
transition: all，它会和 scroll-snap 的原生动画冲突，造成视觉抖动 - 如需更精准控制（比如 iOS Safari 上偶发不吸附），可用
@supports (scroll-snap-type: y mandatory)做渐进增强，降级时用window.scrollBy()+scrollend事件微调
100vh 高度会被压缩，scroll-snap-align: start 就可能对不准视口顶部。这种情况下，用 scroll-padding-top 补偿比硬调 height 更可靠。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
