scroll-snap-type 能用，但必须满足三个硬性条件：显式可滚动容器（height: 100vh + overflow-y: scroll）、子项为直接子元素且设 height: 100vh 与 scroll-snap-align: start、禁用 margin/transform 等干扰属性。
scroll-snap-type 能用，但必须满足三个硬性条件：显式可滚动容器、子项固定尺寸、移动端额外约束。不按规则写，它根本不会触发。
为什么直接给 body 或 html 加 scroll-snap-type 总是失效
浏览器只对「有溢出内容 + 显式设置了 overflow-y: scroll」的元素应用 scroll-snap-type。而默认滚动由 html 承担，但它通常被视口撑满、无内容溢出，scroll-snap 就形同虚设。
- 新建一个包裹层，比如
<div class="scroll-container"></div>，把所有section包进去 -
.scroll-container必须设height: 100vh（不是min-height），overflow-y: scroll，scroll-snap-type: y mandatory -
html和body要清空边距：margin: 0; padding: 0; height: 100%，否则容器高度计算失准
每个 section 必须怎么写才真正“可停靠”
scroll-snap-align 不是建议对齐，而是强制锚点。只要尺寸或布局稍有浮动，浏览器就无法确定停在哪，直接跳过 snap。
- 每个
section必须设height: 100vh（垂直）或width: 100vw（水平）——min-height只能作容错，不能替代 - 必须配
scroll-snap-align: start或center；只写scroll-snap-align不加值无效 - 禁用
margin-top/margin-bottom，它会改变offsetTop，导致视觉停靠位置偏移 - 避免用
flex或grid拉伸section，也不要用transform干扰其布局流
iOS Safari 上滑动卡顿或回弹怎么办
iOS 默认开启弹性 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），scrollbar-width: none只在 Firefox 生效
要不要用 scrollIntoView 替代 scroll-snap
如果需要翻页后聚焦、状态同步、或兼容微信 iOS 内置浏览器（它禁用 scroll-snap），scrollIntoView 是更可控的选择。
- 按钮用
<button data-target="section2">，JS 获取目标后调用.scrollIntoView({ behavior: 'smooth', block: 'start' }) - Safari 旧版本不支持
block: 'start'，可降级为{ behavior: 'smooth' } - 每次翻页后手动调用
section.focus({ preventScroll: true })，前提是该section设了tabindex="-1" - 注意：hash 跳转会污染历史记录、触发重绘，且无法监听完成时机，不如
scrollIntoView干净
最容易被忽略的是：所有 scroll-snap 行为都依赖“可滚动容器有明确溢出”，而不是“看起来像在滚动”。很多问题不是 CSS 写错了，而是容器根本没被浏览器识别为可滚动对象。
