移动端键盘弹出时如何上移页面内容？

方法1：监听输入框聚焦事件，调用scrollIntoView #

这是最直接的方案，当输入框获得焦点时，强制让它滚动到可视区域的合适位置，确保不被键盘遮挡。

原生JavaScript实现：

const inputs = document.querySelectorAll('input, textarea');
inputs.forEach(input => {
  input.addEventListener('focus', () => {
    // 配置参数确保输入框在可视区域内，底部留出缓冲空间
    input.scrollIntoView({
      behavior: 'smooth',
      block: 'center' // 可选：'start'/'center'/'end'，根据需求调整
    });
  });
});

Vue项目中可直接绑定事件：

<input @focus="scrollToInput" />

<script>
export default {
  methods: {
    scrollToInput(e) {
      e.target.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
  }
}
</script>

方法2：利用Visual Viewport API 动态调整滚动位置 #

iOS Safari的visualViewport API可以实时获取键盘弹出后的可视区域尺寸，通过计算输入框位置与视口的差值，精准调整页面滚动量。

window.visualViewport.addEventListener('resize', () => {
  const activeElement = document.activeElement;
  if (!activeElement || !['INPUT', 'TEXTAREA'].includes(activeElement.tagName)) return;

  const rect = activeElement.getBoundingClientRect();
  const viewportHeight = window.visualViewport.height;
  const bottomGap = viewportHeight - rect.bottom;
  
  // 输入框底部超出视口时，滚动页面让输入框完全显示
  if (bottomGap < 0) {
    window.scrollBy({
      top: -bottomGap + 10, // 加10px缓冲避免贴紧键盘
      behavior: 'smooth'
    });
  }
});

方法3：修复固定定位容器的问题 #

如果输入框放在position: fixed的容器中，iOS Safari键盘弹出时不会自动调整容器位置，容易导致遮挡。可尝试：

• 将固定容器改为position: absolute，父容器设置position: relative和overflow-y: auto
• 监听键盘弹出事件，动态修改固定容器的bottom值（比如键盘弹出时设为200px，根据实际键盘高度调整）
• 输入框聚焦时临时移除固定定位，输入完成后恢复

方法4：使用CSS scroll-padding-bottom 预留空间 #

给页面主滚动容器（通常是body）设置scroll-padding-bottom，当输入框聚焦时，浏览器会自动预留该空间，避免被遮挡。

body {
  scroll-padding-bottom: 200px; /* 根据预估键盘高度设置，可按需调整 */
  overflow-y: auto;
}

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