全屏滚动依赖scroll-snap-type和scroll-snap-align实现，无需JS模拟；正确做法是用height:100vh且overflow-y:scroll的独立容器设scroll-snap-type:y mandatory，子页设scroll-snap-align:start并确保min-height:100vh以兼容Safari。
全屏滚动依赖 scroll-snap-type，不是靠 JS 模拟
现代浏览器原生支持全屏滚动，核心是 CSS 的 scroll-snap-type 和 scroll-snap-align，不需要引入 fullpage.js 或手写节流滚动监听。JS 只需极简干预（比如修复 Safari 滚动卡顿或处理键盘导航）。
常见错误是直接给 body 设 scroll-snap-type —— 失效，因为 body 不是可滚动容器（除非显式设 overflow: auto 且高度受限）。正确做法是用一个独立的、高度占满视口的 section 容器包裹所有页面区块。
- 确保父容器设
height: 100vh且overflow-y: scroll - 每个子页区块（如
.section）设scroll-snap-align: start - 父容器设
scroll-snap-type: y mandatory - 禁用默认滚动条干扰：加
-webkit-overflow-scrolling: touch（iOS）和scroll-behavior: smooth（可选）
scroll-snap-type: y mandatory 在 Safari 上可能失效
Safari（尤其是 iOS 15–16）对 mandatory 模式支持不稳定，容易回弹或跳过某一页。这不是 bug，而是 Safari 对“强制吸附”的判定更严格：要求每个 scroll-snap-align 元素必须有明确的、不可压缩的高度边界。
- 每个子页必须设固定高度：
min-height: 100vh，不能只靠内容撑开 - 避免子页内使用
flex: 1或height: 100%，它们在 Safari 中可能被解析为“无明确高度” - 临时绕过方式：改用
scroll-snap-type: y proximity，但吸附感变弱；或加一行 JS 强制滚动后重置位置：el.scrollIntoView({ block: 'start', behavior: 'smooth' }) - 检查是否意外触发了
transform或will-change，这些会破坏 Safari 的 snap 计算
键盘方向键和空格键无法触发全屏滚动？
原生 scroll-snap 不接管键盘事件，默认空格键滚动半页、方向键滚动像素级距离。要实现“按一次空格/↓ 就切一整页”，必须监听 keydown 并手动调用 scrollIntoView。
- 监听
keydown，过滤ArrowDown、ArrowUp、PageDown、PageUp - 用
event.preventDefault()阻止默认滚动行为 - 根据按键方向计算目标元素：当前可见页的
nextElementSibling或previousElementSibling - 调用
target.scrollIntoView({ block: 'start', behavior: 'smooth' })—— 注意 Safari 下behavior: 'smooth'在非用户手势中可能被忽略，可降级为auto
移动端触摸滚动不跟手、拖拽后停不住？
这是 scroll-snap 最典型的兼容性痛点。iOS Safari 和部分安卓 WebView 对 touchmove 的 snap 响应延迟高，尤其在快速拖拽后易停在两页之间。
- 确保容器有
-webkit-overflow-scrolling: touch（iOS 必须） - 避免在滚动容器上设置
touch-action: none或passive: false的事件监听器 - 不要在
scroll事件里做 heavy 操作（比如频繁读取scrollTop），会阻塞 snap 判定 - 真机调试时发现卡顿，可临时关闭
scroll-behavior: smooth，它在 touch 场景下反而增加延迟
实际最易被忽略的是：全屏滚动页面一旦嵌入 iframe（比如预览模式放在某个管理后台里），父页面的 overflow 或 transform 会截断子页面的 scroll-snap 行为。这种情况下，scroll-snap 根本不会触发，连报错都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
