如何让滚动条适配移动端打开的虚拟键盘？

针对移动端虚拟键盘弹出后页面滚动失效、内容被遮挡的问题，给你几个实用的解决方法：

1. 利用visualViewport API（推荐现代浏览器使用） #

现代浏览器提供了visualViewport接口，能精准获取当前可用的视口高度（自动排除虚拟键盘占用空间）。通过监听它的尺寸变化，动态调整页面容器的最小高度：

const viewport = window.visualViewport;
function updateViewportHeight() {
  document.body.style.minHeight = `${viewport.height}px`;
}
// 初始化设置一次
updateViewportHeight();
// 监听视口变化
viewport.addEventListener('resize', updateViewportHeight);

这样页面会始终适配当前的可用空间，滚动条能正常滚动到所有内容区域。

2. 调整视口与CSS适配（针对iOS Safari） #

iOS Safari对vh的处理比较特殊，配合视口标签和专属CSS属性可以解决：

• 确保页面的视口元标签包含viewport-fit=cover：

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

• 给body设置兼容高度：

body {
  min-height: 100vh;
  /* WebKit内核专属，适配可用视口高度 */
  min-height: -webkit-fill-available;
}

这个属性会让body高度自动适配排除键盘后的可用空间，避免固定高度导致的遮挡。

3. 通过窗口resize事件判断键盘状态（兼容旧浏览器） #

对于不支持visualViewport的旧浏览器，可以通过监听窗口高度变化来判断键盘是否弹出，进而调整页面高度：

let initialWindowHeight = window.innerHeight;
window.addEventListener('resize', () => {
  const currentHeight = window.innerHeight;
  // 高度差超过200px，判定为键盘弹出（可根据设备调整阈值）
  if (initialWindowHeight - currentHeight > 200) {
    document.body.style.minHeight = `${currentHeight}px`;
  } else {
    // 键盘收起，恢复原高度
    document.body.style.minHeight = '100vh';
    initialWindowHeight = currentHeight;
  }
});

注意事项 #

• 避免给页面容器设置固定的height: 100vh，改用min-height来保证内容超出时能正常滚动
• 务必在真实移动端设备上测试，不同浏览器的键盘行为可能存在差异

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