使用100vh设置每屏高度，配合overflow控制滚动，可实现无需JavaScript的全屏滑动布局，适用于宣传页等场景；通过scroll-behavior平滑滚动，scroll-snap增强停靠效果，并注意box-sizing、图片占位及移动端dvh兼容性优化体验。
要实现CSS单页布局中的全屏滑动效果，核心是利用vh单位定义每一页的高度为100%视口高度，并通过overflow属性控制整体或局部的滚动行为。这种方式无需JavaScript即可完成基础的全屏分页滚动布局，适用于介绍页、作品集或宣传页。
使用vh单位设置全屏高度
视口高度单位vh表示视口高度的百分比，1vh等于视口高度的1%。因此，将每个内容区块的高度设为100vh，就能让其占据整个屏幕高度。
示例结构如下：
CSS样式设置：
立即学习“前端免费学习笔记（深入）”；
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}
这样每个.slide都会正好填满浏览器可视区域，垂直方向自然堆叠。
控制页面滚动：overflow与body设置
为了让用户能上下滑动浏览不同“屏”，需要确保页面主体允许滚动。通常保持默认的overflow: visible即可，但需注意避免意外隐藏滚动条。
关键点：
- 父容器（如
body或html）不要设置overflow: hidden，否则会禁用全局滚动 - 若想实现平滑滚动，可添加：
html { scroll-behavior: smooth; } - 移除默认边距，防止额外空白：
body { margin: 0; padding: 0; }
优化视觉连续性与防抖动
有时因字体加载或图片异步加载导致页面高度变化，可能引发跳动。可通过以下方式提升体验：
- 统一设置
box-sizing: border-box避免盒模型计算偏差 - 为图片设定固定高度或使用占位符
- 在移动端注意Safari对
100vh的解析问题，可改用JS动态计算或dvh（动态视口单位）作为补充 - 使用
scroll-snap增强滑动停靠感（可选增强）： .container {
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.slide {
scroll-snap-align: start;
}
基本上就这些。通过100vh设定单屏高度，配合合理的overflow控制，就能实现简洁高效的全屏滑动布局。不复杂但容易忽略细节，比如重置默认样式和处理移动端兼容性。
