全屏单页滑动应优先用css scroll snap实现原生精准停靠，配合height: 100vh与scroll-snap-align；js仅用于必要干预，需用requestanimationframe节流wheel事件、避免强制回流，并谨慎处理移动端touchmove被动监听。
全屏单页滑动网页布局不是靠“加个插件就完事”，而是要分清哪些行为必须用 JavaScript 控制，哪些完全能用 CSS 解决——混用或错配会导致滚动卡顿、跳屏、移动端失效。
scrollTo + requestAnimationFrame 节流是基础防线
直接监听 wheel 事件并立刻调用 window.scrollTo，在快速滚动时会触发数十次，造成视觉抖动甚至页面冻结。关键不是“要不要节流”，而是“怎么节流才不丢帧”。
- 用
requestAnimationFrame包裹滚动逻辑，确保只在下一帧执行一次定位，而不是靠setTimeout或布尔锁简单屏蔽 -
event.deltaY的符号判断方向，但注意 Chrome 在触控板上可能返回小数，建议加Math.abs(event.deltaY) > 1过滤微动 - 避免在滚动中读取
document.documentElement.scrollTop，它会强制同步回流；改用window.scrollY（更稳定）或缓存滚动目标值
CSS Scroll Snap 是现代浏览器的首选方案
Chrome 69+、Firefox 68+、Safari 14.1+ 均原生支持 scroll-snap-type，无需 JS 就能实现精准停靠，且天然兼容键盘 PageDown 和触摸拖拽惯性。
- 容器需设
scroll-snap-type: y mandatory，子区块设scroll-snap-align: start - 必须配合
overflow-y: scroll和height: 100vh（不能用min-height） - 若内容区块高度不严格等于视口（比如有 border 或 margin），会出现偏移，建议统一用
height: 100vh+box-sizing: border-box - 禁用默认滚动条干扰：加
scrollbar-width: none（Firefox）和::-webkit-scrollbar { display: none }
移动端 touchmove 与 passive event listener 的坑
iOS Safari 和 Android Chrome 对 touchmove 默认启用 passive 模式，一旦你在回调里调用 preventDefault()（比如想阻止页面缩放），就会报 Unable to preventDefault inside passive event listener 错误。
- 注册监听器时显式传
{ passive: false }：element.addEventListener('touchmove', handler, { passive: false }) - 但注意：这会降低滚动性能，仅在确实需要干预默认行为（如自定义拖拽定位）时启用
- 更稳妥的做法是放弃 touchmove 控制，改用
scroll事件监听 +scroll-behavior: smooth配合锚点跳转 - 测试时务必在真机开启“远程调试”，模拟器无法复现 touch 事件的阻塞行为
Grid 布局隐藏页脚比 JS 计算更可靠
很多教程教用 JS 动态计算 content 高度来撑满视口，但窗口 resize、字体加载、动态内容插入都会导致高度错乱。纯 CSS 方案反而更稳。
- 用
grid-template-rows: auto 1fr 0+height: 100vh，让中间行占满剩余空间 - 页脚设
height: min-content，既保持内容可渲染，又不会撑开布局 - 禁止 body 出现滚动条：
body { margin: 0; overflow: hidden }，否则100vh会包含滚动条宽度误差 - 这个方案不依赖 JS，也不影响 SEO，但要求所有全屏区块都作为直接子元素放在 grid 容器内
真正难的不是让页面“动起来”，而是让每一次滚动都落在像素级对齐的位置、不闪、不卡、不跳——尤其当内容区块里嵌了 iframe、视频或 canvas 时，will-change: transform 和 contain: layout paint 得手动加，不然 GPU 渲染管线一卡，整个体验就垮了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
