虚拟键盘开启时如何阻止100%高度body的页面滚动？

方案1：锁定页面滚动+动态匹配视觉视口高度 #

通过将html和body设置为overflow: hidden，彻底阻止页面级滚动，同时让聊天容器高度严格匹配视觉视口，内部消息区单独滚动，从根源上避免底部空白：

CSS 代码 #

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* 禁止页面整体滚动 */
}

.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%; /* 初始占满视口 */
}

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 10;
}

.sticky-footer {
  position: sticky;
  bottom: 0;
  z-index: 10;
}

.chat-messages {
  flex: 1;
  overflow-y: auto; /* 让消息区内部滚动 */
  -webkit-overflow-scrolling: touch; /* 优化iOS滚动流畅度 */
}

JavaScript 代码 #

监听视觉视口的 resize 事件，动态更新容器高度，确保始终匹配键盘弹出后的可视区域：

function syncViewportHeight() {
  const visualHeight = window.visualViewport.height;
  document.documentElement.style.height = `${visualHeight}px`;
  document.body.style.height = `${visualHeight}px`;
  document.querySelector('.chat-container').style.height = `${visualHeight}px`;
}

// 初始化+监听视口变化
window.visualViewport.addEventListener('resize', syncViewportHeight);
syncViewportHeight();

方案2：强制阻止视觉视口滚动（针对无法锁定页面滚动的场景） #

如果必须保留页面滚动能力，可通过监听visualViewport的滚动事件，强制将滚动位置重置到顶部，消除延迟问题：

// 设置passive: false，确保同步执行滚动重置，解决iOS延迟
window.visualViewport.addEventListener('scroll', () => {
  if (window.visualViewport.scrollTop > 0) {
    window.visualViewport.scrollTo(0, 0);
  }
}, { passive: false });

// 同步更新视口高度的代码同方案1
function syncViewportHeight() {
  const visualHeight = window.visualViewport.height;
  document.documentElement.style.height = `${visualHeight}px`;
  document.body.style.height = `${visualHeight}px`;
}
window.visualViewport.addEventListener('resize', syncViewportHeight);
syncViewportHeight();

方案3：优化虚拟键盘API的使用 #

结合viewport-fit=cover和虚拟键盘API的正确配置，适配现代浏览器的虚拟键盘行为：

1. 更新viewport meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

2. 启用虚拟键盘覆盖内容并监听几何变化：

if ('virtualKeyboard' in navigator) {
  navigator.virtualKeyboard.overlaysContent = true;
  navigator.virtualKeyboard.addEventListener('geometrychange', (e) => {
    const keyboardHeight = e.target.boundingRect.height;
    const visualHeight = window.innerHeight - keyboardHeight;
    document.documentElement.style.height = `${visualHeight}px`;
    document.body.style.height = `${visualHeight}px`;
  });
}

关键注意点 #

• 确保没有任何元素的高度超过设置的视觉视口高度，否则会触发不必要的滚动；
• iOS Safari对visualViewport的处理有差异，建议优先测试方案1；
• 避免同时混用position: fixed和sticky，固定定位在虚拟键盘弹出时容易出现布局偏移。

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