移动端Android Chrome使用snap-scroll时页面底部被截断求助

问题根源 #

Android Chrome的动态导航栏会让100vh的计算包含导航栏占位空间，导致实际可用内容区域被压缩。你替换成height:100%但没解决，是因为父元素（html/body）的高度没正确适配动态视口，加上滚动容器的属性冲突。

具体修复步骤 #

1. 调整滚动容器的高度属性 #

把snap_scroll的高度设置换成适配动态视口的组合，彻底避开导航栏的影响：

.snap_scroll {
  max-width: 100%;
  /* 优先适配webkit内核移动端浏览器 */
  height: -webkit-fill-available;
  /* 现代浏览器用动态视口单位，自动排除导航栏 */
  height: 100dvh;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  /* 移除之前的max-height，避免和height属性冲突 */
}

100dvh是CSS新增的动态视口单位，会自动忽略浏览器的动态UI（比如收起/展开的导航栏），-webkit-fill-available则是针对老版本Android Chrome的兼容方案。

2. 确保子页面高度正确继承 #

给子页面（比如.contact）加上min-height:100%兜底，防止高度计算异常：

.contact{
  height: 100%;
  min-height: 100%;
  width: 100%;
  background: url(./img/app_background_2.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  scroll-snap-align: start;
  overflow: hidden;
  margin: 0;
}

3. 全局根元素高度重置 #

在CSS最开头添加全局样式，确保html和body的高度正确适配视口：

html, body {
  height: 100%;
  height: -webkit-fill-available;
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

关于Snap Scroll高度单位的疑问 #

Snap Scroll不需要强制用100vh，只要滚动容器和子元素的高度能让子元素刚好填满容器的可视区域，就能正常触发滚动吸附。核心是要适配移动端的动态视口，避免固定高度单位带来的内容截断问题。

内容的提问来源于stack exchange，提问作者Krytos