原生全屏滚动需用 scroll-snap-type + scroll-snap-align 实现，关键在于：1. 在显式设 height: 100vh 和 overflow-y: scroll 的容器上设置 scroll-snap-type；2. 每个 section 必须设固定 height 和 scroll-snap-align；3. 加 overscroll-behavior-y: contain 防 ios bounce；4. 隐藏滚动条需兼容各浏览器。
直接用 scroll-snap-type + scroll-snap-align 就能实现原生、轻量、不依赖 JS 的全屏滚动，比手写监听 scroll 事件或用第三方库更稳、更省资源。
scroll-snap-type 必须设在可滚动容器上，不是 body
很多人把 scroll-snap-type: y mandatory 写在 body 或 html 上，结果无效——因为默认情况下 body 不是“可滚动容器”，它的滚动行为由 html 承担，但 html 又常被视口撑满、没有溢出，导致 snap 失效。
- 正确做法：新建一个包裹所有 section 的
div.scroll-container，给它设height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory; - 必须确保该容器有明确的滚动高度（不能靠
min-height或内容撑开） -
overscroll-behavior-y: contain建议加上，防止滚动到底部时触发页面回弹或下拉刷新
每个 section 要设 height 和 scroll-snap-align
仅设 scroll-snap-align: start 不够，浏览器需要知道“在哪停”。如果子元素高度不固定或被 flex / grid 拉伸，snap 会失效或错位。
- 每个
section必须显式设置height: 100vh（垂直滚动）或width: 100vw（水平滚动） -
scroll-snap-align: start表示对齐到容器顶部；若想居中停，用center，但需配合容器 padding 或子元素 margin 调整视觉位置 - 避免给 section 设
margin-top/bottom，它会影响offsetTop计算，干扰 snap 精度
滚动条默认可见，隐藏它要分浏览器处理
Chrome/Edge/Safari 下，scroll-snap 容器的滚动条仍会显示，影响全屏沉浸感。Firefox 默认隐藏，但不可靠。
- 隐藏纵向滚动条：
.scroll-container::-webkit-scrollbar { display: none; } - 同时加
overflow-y: -webkit-scrollable-area（仅 WebKit）可防滚动条占位导致内容偏移 - Firefox 需额外加
scrollbar-width: none，但仅支持 Firefox 64+ - 注意：隐藏后用户仍可通过空格键、方向键、触控板滚动，功能不受影响
移动端 Safari 的 overscroll 和 bounce 是最大坑
iOS Safari 默认开启滚动边界弹性效果（bounce），会导致 scroll-snap 在快速滑动后“多弹一下”，停不准，甚至跳过一屏。
- 必须加
overscroll-behavior-y: contain到容器上，禁用穿透和 bounce - 若仍抖动，检查是否用了
position: fixed的 header/footer——它们可能干扰 scroll-snap 的布局上下文 - 不要在容器上同时设
touch-action: pan-y，它会和 snap 冲突，导致滑动卡顿或失效
真正难调的不是写几行 CSS，而是让每一屏都“咬合”得严丝合缝：viewport 缩放、字体加载抖动、图片异步渲染、iOS 键盘弹起后的视口重算……这些都会让 100vh 失准，snap 偏移。上线前务必在真机上用不同尺寸、不同系统版本反复滑动十次以上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
