CSS单页布局如何实现全屏滑动_通过vh单位和overflow控制滚动效果

新闻中心 NEWS CENTER

2025-11-22

浏览次数：次

使用100vh设置每屏高度，配合overflow控制滚动，可实现无需J*aScript的全屏滑动布局，适用于宣传页等场景；通过scroll-beh*ior平滑滚动，scroll-snap增强停靠效果，并注意box-sizing、图片占位及移动端dvh兼容性优化体验。

css单页布局如何实现全屏滑动_通过vh单位和overflow控制滚动效果

要实现CSS单页布局中的全屏滑动效果，核心是利用vh单位定义每一页的高度为100%视口高度，并通过overflow属性控制整体或局部的滚动行为。这种方式无需J*aScript即可完成基础的全屏分页滚动布局，适用于介绍页、作品集或宣传页。

视口高度单位vh表示视口高度的百分比，1vh等于视口高度的1%。因此，将每个内容区块的高度设为100vh，就能让其占据整个屏幕高度。

示例结构如下：

第一屏

第二屏

第三屏

CSS样式设置：

.slide {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

这样每个.slide都会正好填满浏览器可视区域，垂直方向自然堆叠。

Avatar AI

AI成像模型，可以从你的照片中生成逼真的4K头像

查看详情

为了让用户能上下滑动浏览不同“屏”，需要确保页面主体允许滚动。通常保持默认的overflow: visible即可，但需注意避免意外隐藏滚动条。

关键点：

有时因字体加载或图片异步加载导致页面高度变化，可能引发跳动。可通过以下方式提升体验：

基本上就这些。通过100vh设定单屏高度，配合合理的overflow控制，就能实现简洁高效的全屏滑动布局。不复杂但容易忽略细节，比如重置默认样式和处理移动端兼容性。

以上就是CSS单页布局如何实现全屏滑动_通过vh单位和overflow控制滚动效果的详细内容，更多请关注其它相关文章！