移动端Chrome打开键盘时固定元素消失的解决咨询

我做了一个带顶部固定栏和底部固定文本框的简单HTML页面，正常滚动时固定元素能正常保持位置。但在移动端Chrome里，点击底部文本框唤起键盘后滚动页面，固定的div会消失，反向滚动又会出来，旧版Chrome没这个问题。有没有办法让固定元素在键盘唤起（焦点激活）时始终保持可见？

用户提供的原始代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fixed Elements</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }
    #oben {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: lightblue;
      padding: 10px;
      height: 50px;
    }
    #unten {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: lightgreen;
      padding: 10px;
    }
    #textbereich {
      width: 95%;
      height: 50px;
    }
  </style>
</head>
<body>
  <div id="oben">
    <p>Here is the fixed content at the top.</p>
  </div>
  <div style="height: 3000px; border: 1px solid; margin: 20px;">text</div>
  <div id="unten">
    <textarea id="textbereich" placeholder="Fixed text area at the bottom"></textarea>
  </div>
</body>
</html>

解决方案 #

1. 优化viewport元标签 #

修改viewport参数，明确设备高度并启用视口适配，减少键盘唤起时的布局偏移：

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

2. 顶部栏改用position: sticky替代fixed #

sticky定位在移动端键盘唤起场景下的表现更稳定，配合top:0实现顶部固定：

#oben {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background-color: lightblue;
  padding: 10px;
  height: 50px;
  z-index: 100;
}

3. 监听键盘状态动态调整底部元素位置 #

通过resize和焦点事件检测键盘唤起状态，手动调整底部固定栏的位置：

const bottomBar = document.getElementById('unten');

function adjustBottomBar() {
  const windowHeight = window.innerHeight;
  const documentHeight = document.documentElement.clientHeight;
  // 通过窗口高度变化判断键盘是否唤起
  const isKeyboardOpen = windowHeight < documentHeight * 0.8;
  if (isKeyboardOpen) {
    const keyboardHeight = documentHeight - windowHeight;
    bottomBar.style.bottom = `${keyboardHeight}px`;
  } else {
    bottomBar.style.bottom = '0';
  }
}

// 绑定事件监听
window.addEventListener('resize', adjustBottomBar);
document.getElementById('textbereich').addEventListener('focusin', adjustBottomBar);
document.getElementById('textbereich').addEventListener('focusout', adjustBottomBar);

4. 禁用页面弹性滚动（可选） #

在body上添加overscroll-behavior: contain，阻止页面整体滚动干扰固定元素：

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  overscroll-behavior: contain;
}

修改后的完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>固定元素示例</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, height=device-height, viewport-fit=cover">
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      overscroll-behavior: contain;
    }
    #oben {
      position: sticky;
      top: 0;
      left: 0;
      width: 100%;
      background-color: lightblue;
      padding: 10px;
      height: 50px;
      z-index: 100;
    }
    #unten {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: lightgreen;
      padding: 10px;
      transition: bottom 0.3s ease;
    }
    #textbereich {
      width: 95%;
      height: 50px;
    }
  </style>
</head>
<body>
  <div id="oben">
    <p>顶部固定内容</p>
  </div>
  <div style="height: 3000px; border: 1px solid; margin: 20px;">滚动内容</div>
  <div id="unten">
    <textarea id="textbereich" placeholder="底部固定文本框"></textarea>
  </div>

  <script>
    const bottomBar = document.getElementById('unten');

    function adjustBottomBar() {
      const windowHeight = window.innerHeight;
      const documentHeight = document.documentElement.clientHeight;
      const isKeyboardOpen = windowHeight < documentHeight * 0.8;
      if (isKeyboardOpen) {
        const keyboardHeight = documentHeight - windowHeight;
        bottomBar.style.bottom = `${keyboardHeight}px`;
      } else {
        bottomBar.style.bottom = '0';
      }
    }

    window.addEventListener('resize', adjustBottomBar);
    document.getElementById('textbereich').addEventListener('focusin', adjustBottomBar);
    document.getElementById('textbereich').addEventListener('focusout', adjustBottomBar);
  </script>
</body>
</html>

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