scroll-snap-type能实现全屏切换，但必须满足三前提：滚动容器设height: 100vh、overflow-y: scroll，且子项显式设scroll-snap-align: start；缺一不可，否则不吸附。
直接说结论：scroll-snap-type 能做全屏切换，但不是“设了就灵”，90% 失效都因为容器没满足滚动上下文前提——height、overflow-y: scroll、scroll-snap-align 三者缺一不可。
为什么 scroll-snap-type 设了却完全不吸附？
根本不是属性写错，而是浏览器压根没把它当“可滚动容器”处理。常见现象：能滑动，但松手后不卡位、甚至直接滚到底。
-
scroll-snap-type: y mandatory必须写在**显式设置了height: 100vh且overflow-y: scroll的直接父容器上**，不能写在或上 - 子项（如
<section></section>）必须是该容器的**直接子元素**，且每个都要加scroll-snap-align: start - 别用
margin-bottom分隔页面——它会让实际滚动距离 ≠ 视口高度，吸附点偏移；改用min-height: 100vh+box-sizing: border-box - 检查是否误设
overflow: hidden：这会禁用滚动，scroll-snap-type彻底失效
移动端 Safari 滚不动或滑过头怎么办？
iOS Safari 对横向/纵向滚动的处理逻辑不同，尤其在触控惯性下容易跳页或卡中间。这不是 bug，是默认 touch-action 限制导致的。
- 垂直滚动时，给滚动容器加
touch-action: pan-y；横向轮播则用touch-action: pan-x - 删掉
-webkit-overflow-scrolling: touch—— iOS 14+ 已弃用，留着反而干扰原生滚动 - 每个子项用
height: 100vh（不是min-height），避免 flex 或 grid 布局撑高后干扰scroll-snap-align基准 - 加
overscroll-behavior-y: contain防止滚到底触发下拉刷新或页面回弹
怎么让翻页只响应滚轮，禁用拖拽？
scroll-snap-type 本身无法禁用拖拽，但可通过组合 CSS + JS 实现“仅 wheel/keydown 可翻页”：
- CSS 层面：给滚动容器加
touch-action: none（禁触摸拖拽），再用overscroll-behavior-y: contain阻断穿透 - JS 层面：监听
wheel和keydown（方向键），event.preventDefault()后手动scrollTo()到最近 snap 点 - 千万别监听
touchmove并preventDefault()—— 这会彻底废掉所有触摸交互，包括点击和缩放 - 节流很重要：连续滚轮可能触发多次，用
setTimeout+ 标志位控制单次翻页
scroll-snap-stop: always 到底要不要加？
它确实能防止快速滑动时跳过某一页（尤其 macOS 惯性滚动下），但兼容性目前只稳在 Chrome 95+ 和 Firefox 68+，Safari 支持弱且行为不一致。
- 优先保证基础三件套：
scroll-snap-type: y mandatory+scroll-snap-align: start+ 容器height&overflow -
scroll-snap-stop: always当作增强项，用@supports (scroll-snap-stop: always)包裹，老浏览器自动降级 - 真要 100% 控制步进（比如相册不允许跳页），不如监听
scrollend事件 +scrollTo()锁定位置，更可靠 - 注意：如果子项用了
transform或will-change，可能干扰scroll-snap-stop计算，先排查这些样式
最易被忽略的是初始定位：页面加载后若没手动 scrollTo({ top: 0, behavior: 'smooth' })，可能因渲染时机卡在两个 section 中间——scroll-snap 不管初始状态，只管“滚动结束时”的吸附。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
