点击输入框弹出虚拟键盘时，输入框被悬浮底部栏遮挡的问题求助

问题背景 #

应用采用悬浮（粘性）头部、悬浮底部栏的布局，内容区域在二者之间滚动。点击输入框弹出虚拟键盘时，部分输入框会被底部栏遮挡（比如原本在屏幕中部的城市输入框，弹出键盘后被底部栏挡住），期望输入框能显示在底部栏正上方。

当前实现及存在的问题 #

当前通过监听window.resize事件检测键盘弹出，用document.querySelector(":focus")获取聚焦的输入框/文本域，曾尝试element.scrollIntoView({block: "center"})但无效（元素初始在屏幕中心时不会滚动，仍被遮挡）。现有代码如下：

var inputs = document.querySelectorAll("input, textarea");
var container = document.querySelector(".screen > .content");

window.addEventListener("resize", function(e) {

var targetEl = document.querySelector(":focus");
var bottomBar = document.querySelector(".bottom-bar-wrapper");

if(targetEl.nodeName.toLowerCase() === "input" || targetEl.nodeName.toLowerCase() === "textarea") {
    var scrollY = Math.floor(targetEl.getBoundingClientRect().top + targetEl.getBoundingClientRect().height + bottomBar.getBoundingClientRect().height);
        
    container.scrollTo(0, scrollY);
}

});

该方案效果尚可但不够优雅，且存在切换输入框时滚动位置计算错误的问题，导致输入框无法正常显示。

问题原因分析 #

1. 事件触发逻辑缺失：切换输入框时，虚拟键盘已处于弹出状态，窗口不会触发resize事件，原有逻辑无法执行；若偶然触发，getBoundingClientRect()计算的是滚动后的元素位置，叠加底部栏高度会导致滚动值重复计算，出现滚动过度。
2. 滚动位置计算逻辑错误：targetEl.getBoundingClientRect().top是元素相对于视口的顶部距离，直接叠加元素高度和底部栏高度作为滚动参数，既没考虑容器当前的滚动偏移量，也没结合视口减去底部栏的安全区域计算，导致滚动目标位置偏差。
3. 焦点元素获取时机偏差：切换输入框时，焦点切换的时机可能与resize事件不同步，导致targetEl并非当前实际聚焦的输入框，计算结果错误。

优化解决方案 #

1. 改用焦点事件+resize事件双重监听 #

直接监听输入框的focus事件，精准捕获输入框激活时机，同时保留resize事件应对键盘状态变化的场景：

const container = document.querySelector(".screen > .content");
const bottomBar = document.querySelector(".bottom-bar-wrapper");
const inputs = document.querySelectorAll("input, textarea");

// 统一处理输入框聚焦后的滚动调整
function adjustInputPosition(el) {
  if (!el || !bottomBar) return;
  
  const bottomBarHeight = bottomBar.getBoundingClientRect().height;
  // 计算视口内的安全区域底部（视口高度 - 底部栏高度）
  const safeViewPortBottom = window.innerHeight - bottomBarHeight;
  // 元素的底部位置（相对于视口）
  const elBottom = el.getBoundingClientRect().bottom;
  
  // 如果元素底部超出安全区域，计算需要滚动的距离
  if (elBottom > safeViewPortBottom) {
    // 滚动偏移量 = 容器当前滚动值 + (元素底部 - 安全区域底部)
    const scrollOffset = container.scrollTop + (elBottom - safeViewPortBottom);
    // 平滑滚动到目标位置
    container.scrollTo({
      top: scrollOffset,
      behavior: 'smooth'
    });
  }
}

// 给所有输入框绑定focus事件
inputs.forEach(input => {
  input.addEventListener('focus', () => {
    // 延迟执行，确保键盘弹出后的布局稳定（适配部分移动端浏览器）
    setTimeout(() => adjustInputPosition(input), 100);
  });
});

// 保留resize事件处理，应对键盘收起后再弹出、窗口尺寸变化的场景
window.addEventListener('resize', () => {
  const focusedEl = document.querySelector(':focus');
  if (['INPUT', 'TEXTAREA'].includes(focusedEl?.nodeName)) {
    setTimeout(() => adjustInputPosition(focusedEl), 100);
  }
});

2. 优化滚动计算逻辑 #

• 以**视口安全区域（视口高度 - 底部栏高度）**为基准，判断元素是否被遮挡；
• 结合容器当前scrollTop计算滚动偏移，避免重复滚动导致的位置偏差；
• 使用scrollTo的behavior: 'smooth'提升用户体验。

3. 可选：输入框失焦后的滚动重置 #

如果需要在输入完成后恢复滚动位置，可监听blur事件：

inputs.forEach(input => {
  input.addEventListener('blur', () => {
    // 可选：滚动回原位置，或保留当前位置
    // container.scrollTo({ top: 0, behavior: 'smooth' });
  });
});

关键说明 #

• 延迟100ms执行是为了适配部分移动端浏览器，确保键盘弹出后布局完成重绘，元素位置计算准确；
• 双重事件监听覆盖了输入框激活、键盘状态变化、窗口尺寸调整等所有场景；
• 纯原生JS实现，无需依赖第三方库，兼容性更强。

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