视口变化时如何实现计算位置/容器高度的动画过渡？

一、通过CSS过渡缓冲视口变化 #

Android Chrome的地址栏显示/隐藏会触发视口高度突变，直接使用dvh会导致布局瞬间重绘，给容器加上过渡动画就能让按钮移动更平滑：

/* 外部容器样式 */
.container {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  transition: height 0.3s ease; /* 匹配浏览器栏动画的时长 */
}

.content {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior-y: contain; /* 禁用滚动回弹，减少意外触发地址栏变化 */
}

.bottom-btn {
  height: 60px; /* 固定按钮高度 */
}

二、改用固定定位+过渡 #

如果flex布局的适配效果不理想，直接用固定定位锚定按钮，再配合过渡属性：

.bottom-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom); /* 适配底部安全区 */
  height: 60px;
  transition: bottom 0.3s ease;
}

.content {
  padding-bottom: calc(60px + env(safe-area-inset-bottom)); /* 避免内容被按钮遮挡 */
}

这种方式让按钮直接绑定到视口底部，过渡动画会抵消地址栏变化带来的突兀感。

三、JS监听视口变化动态调整 #

如果CSS方案仍有瑕疵，可以用JS监听视口高度变化，手动控制容器高度的过渡：

let prevViewportHeight = window.innerHeight;

window.addEventListener('resize', () => {
  const currentHeight = window.innerHeight;
  // 过滤微小的视口变化，避免不必要的重绘
  if (Math.abs(currentHeight - prevViewportHeight) > 10) {
    document.querySelector('.container').style.height = `${currentHeight}px`;
    prevViewportHeight = currentHeight;
  }
});

同时给容器保留CSS过渡：

.container {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  transition: height 0.3s ease;
}

额外提示 #

• 务必在真实Android设备上测试，模拟器无法完全还原浏览器地址栏的动画逻辑
• 避免内容高度刚好超出视口1px，这种情况会触发地址栏自动隐藏，加剧跳动问题
• 不要用position: sticky实现底部固定，它在视口高度变化时的表现不稳定

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