利用 CSS 的 scroll-snap-type 和 scroll-snap-align 属性，无需 JavaScript 即可实现精准的全屏高度（100vh）分页滚动，兼容现代浏览器且性能优异、代码简洁。
利用 css 的 `scroll-snap-type` 和 `scroll-snap-align` 属性，无需 javascript 即可实现精准的全屏高度（100vh）分页滚动，兼容现代浏览器且性能优异、代码简洁。
实现页面逐屏滚动（即每次滚动精确跳转至下一个 100vh 区域），最推荐的方式是采用原生 CSS Scroll Snap 机制——它由浏览器原生支持，响应流畅、无抖动、无需监听 scroll 事件或手动计算视口高度，彻底规避了 scrollTo/scrollBy 带来的卡顿、过度滚动或状态同步问题。
✅ 推荐方案：纯 CSS 实现（推荐）
只需两段关键样式即可完成：
body {
margin: 0; /* 消除默认 body 边距，确保全屏占位 */
}
.container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-y: scroll;
scroll-snap-type: y mandatory; /* 启用垂直方向强制吸附 */
-webkit-overflow-scrolling: touch; /* iOS 平滑滚动优化 */
}
.container > section {
height: 100vh;
scroll-snap-align: start; /* 或 center / end，控制对齐基准点 */
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
background-color: #f5f5f5;
}HTML 结构示例（每个 <section></section> 即为一“页”）：
<div class="container"> <section>第一页</section> <section>第二页</section> <section>第三页</section> <section>第四页</section> <section>第五页</section> </div>
? 关键说明：
立即学习“前端免费学习笔记（深入）”；
scroll-snap-type: y mandatory表示滚动必须强制吸附到最近的scroll-snap-align元素；scroll-snap-align: start表示以元素顶部对齐吸附线（推荐），若需居中对齐可用center；- 使用
position: fixed+100vh确保容器始终铺满视口，避免因 body 默认滚动导致嵌套混乱；- 所有子区块（如
<section></section>）必须显式设置height: 100vh（不可依赖min-height或flex: 1）。
⚠️ 注意事项与常见陷阱
- ❌ 避免在
body上直接设置scroll-snap-type：部分浏览器（尤其是 Safari）对 body 的 scroll snap 支持不稳定，务必封装在独立容器内； - ❌ 不要混用 JS 滚动控制（如
scrollTo）与 CSS scroll snap：二者冲突会导致行为不可预测； - ✅ 添加
-webkit-overflow-scrolling: touch可显著提升 iOS 设备滚动顺滑度； - ✅ 若需支持键盘导航（空格键、方向键），确保容器可聚焦（如添加
tabindex="0"）； - ✅ 在 React/Vue 等框架中，将
.container作为根级组件容器即可，无需 useState 或 useEffect 处理滚动逻辑。
? 总结
放弃手动监听 scroll 事件、计算 vh、调用 scrollTo 的复杂方案——CSS Scroll Snap 是现代 Web 开发中实现“翻页式滚动”的标准解法。它语义清晰、性能卓越、维护成本低，且天然支持触控、滚轮、键盘等多种输入方式。只要确保结构语义正确、样式声明完整，即可一键启用专业级逐页滚动体验。
