移动端软键盘弹出时Bootstrap Modal自动滚动到底部如何解决？

问题根因 #

该问题是Bootstrap Modal默认的定位逻辑、自动聚焦规则和移动端软键盘唤起后的视口变化逻辑冲突导致：

1. 移动端软键盘唤起会压缩可视区域高度，触发window.resize事件，Modal默认的滚动重置逻辑会错误计算滚动位置
2. Bootstrap默认的Modal强制聚焦规则，会在弹窗激活时自动将第一个（或最后一个聚焦过的）输入元素滚动到可视区域，若元素位于弹窗底部就会触发滚动到底的问题
3. 部分iOS设备下fixed定位的容器在软键盘唤起时会出现定位漂移，进一步放大滚动异常

修复方案 #

1. 禁用Modal默认强制聚焦逻辑 #

初始化Modal时关闭默认的focus配置，避免框架自动触发滚动：

// Bootstrap 4/5 写法
$('#yourModal').modal({
  focus: false
})

如果是Bootstrap 3版本，可以直接覆盖原型方法禁用自动聚焦：

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

2. CSS层面修复定位和滚动冲突 #

覆盖默认Modal样式，固定容器尺寸、禁用不必要的滚动继承：

/* 固定Modal容器尺寸，避免随视口压缩异常滚动 */
.modal {
  overflow: auto !important;
  height: 100vh !important;
}
/* 锁定body滚动，避免滚动穿透干扰Modal位置 */
body.modal-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

3. 手动控制输入框聚焦时的滚动行为 #

监听输入框focus事件，自定义滚动规则，避免默认逻辑将页面滚到底部：

const modal = document.querySelector('.modal')
// 保存弹窗当前滚动位置
let currentScrollTop = 0

// 弹窗打开时记录初始滚动位置
modal.addEventListener('show.bs.modal', () => {
  currentScrollTop = modal.scrollTop
})

// 软键盘唤起触发resize时，恢复之前的滚动位置
window.addEventListener('resize', () => {
  if (document.body.classList.contains('modal-open')) {
    modal.scrollTop = currentScrollTop
  }
})

// 输入框聚焦时，仅将当前输入框滚动到可视区域中部，而非整页滚动
document.querySelectorAll('.modal input, .modal textarea').forEach(input => {
  input.addEventListener('focus', (e) => {
    setTimeout(() => {
      e.target.scrollIntoView({
        block: 'center',
        behavior: 'smooth'
      })
      // 更新当前滚动位置
      currentScrollTop = modal.scrollTop
    }, 200)
  })
})

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