如何解决Chrome移动端地址栏隐藏时设置100vh仍意外滚动的问题

移动端Chrome的100vh计算规则是包含显示状态下的地址栏高度的，当用户滚动页面触发地址栏隐藏时，视口实际高度增加，但此时页面已经基于之前的100vh高度渲染完成，就会触发异常的向下滚动。你之前用的硬编码高度计算无法适配不同设备、不同版本Chrome的地址栏高度差异，所以无法解决问题。

• 方案1：使用动态视口单位dvh（推荐，兼容Chrome 108+及所有现代移动端浏览器）
  dvh是W3C新增的动态视口单位，会自动跟随地址栏的显示/隐藏状态实时调整高度，无需手动计算：

html,
body{
     height: 100dvh;
}
.fixed-view {
    height: 100dvh;
    /* 原有其他样式保留即可 */
}

• 方案2：JS动态计算视口高度（兼容所有旧版本浏览器）
  通过JS实时获取当前视口高度，注入CSS自定义变量供全局使用：

// 页面加载和窗口大小改变时都更新视口高度变量
function setViewportHeight() {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}
window.addEventListener('resize', setViewportHeight);
window.addEventListener('load', setViewportHeight);

CSS部分替换原有高度设置：

html,
body{
     height: calc(var(--vh, 1vh) * 100);
}
@supports (-webkit-appearance:none) {
    .fixed-view {
        height: calc(var(--vh, 1vh) * 100);
    }
}

• 方案3：隔离滚动区域
  如果你的页面滚动都在内部容器而非全局，直接禁用全局滚动，将滚动交给内部容器，也可以规避这个问题：

html,
body{
     height: 100%;
     overflow: hidden;
     margin: 0;
     padding: 0;
}
/* 内部滚动容器 */
.page-content {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

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