iOS端Safari/Chrome聚焦输入框时出现非预期滚动问题

问题说明 #

在iOS系统的Safari和Chrome浏览器中，聚焦表单输入框弹出键盘时，页面body会出现横向滚动条。该问题仅出现在iOS端，Android移动端无此现象，且所有包含表单输入框的页面都会受影响。

可行解决方案 #

方案1：CSS 强制禁止横向溢出 #

通过给根元素和页面容器设置横向溢出隐藏，同时锁定宽度避免内容超出视口：

html, body {
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 给页面最外层容器额外添加限制 */
.page-wrap {
  max-width: 100vw;
  overflow-x: hidden;
}

方案2：监听键盘弹出事件重置页面宽度 #

利用iOS键盘唤起时窗口高度变化的特性，通过JS监听并强制修正页面宽度：

window.addEventListener('resize', () => {
  const activeEl = document.activeElement;
  if (['INPUT', 'TEXTAREA'].includes(activeEl.tagName)) {
    document.body.style.width = `${window.innerWidth}px`;
    // 可选：滚动到输入框位置避免被键盘遮挡
    setTimeout(() => window.scrollTo(0, activeEl.offsetTop), 100);
  }
});

方案3：优化视口元标签配置 #

确保页面视口标签锁定宽度、禁止缩放，避免系统自动调整视口引发滚动：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

方案优先级 #

优先尝试方案1（纯CSS修复，侵入性最低）；若页面存在动态宽高内容，可结合方案2或方案3使用。

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