移动端弹窗输入框聚焦后被底部工具栏遮挡的滚动适配问题咨询

针对你遇到的移动端弹窗输入框被底部工具栏遮挡的问题，这里有几个可行的解决方案：

方案1：监听输入框焦点事件，手动控制滚动位置 #

给输入框绑定focus事件，当输入框获得焦点时，计算它与底部工具栏的位置差，手动将输入框滚动到工具栏上方的可见区域：

const inputElements = document.querySelectorAll('.modal-scroll-content input, .modal-scroll-content textarea');
const footer = document.querySelector('.modal-footer');

inputElements.forEach(input => {
  input.addEventListener('focus', () => {
    const inputRect = input.getBoundingClientRect();
    const footerRect = footer.getBoundingClientRect();
    // 计算输入框底部超出工具栏顶部的距离
    const overlap = inputRect.bottom - footerRect.top;
    
    if (overlap > 0) {
      // 滚动输入框到可见位置，底部留出10px留白
      input.scrollIntoView({
        behavior: 'smooth',
        block: 'end'
      });
      // 若scrollIntoView效果不佳，可手动调整滚动容器的scrollTop
      // const scrollContainer = document.querySelector('.modal-scroll-content');
      // scrollContainer.scrollTop += overlap + 10;
    }
  });
});

方案2：给滚动容器添加底部内边距 #

直接给弹窗的滚动内容容器设置等于（甚至略大于）底部工具栏高度的内边距，确保滚动内容的底部不会被工具栏遮挡：

/* 滚动内容容器 */
.modal-scroll-content {
  overflow-y: auto;
  padding-bottom: calc(60px + 15px); /* 60px为工具栏高度，15px是额外留白 */
}

/* 底部工具栏固定定位 */
.modal-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #fff;
}

/* 弹窗容器需设置相对定位，配合工具栏的绝对定位 */
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

方案3：修正滚动上下文，让浏览器自动滚动生效 #

确保弹窗的滚动上下文是内部的内容容器，而非弹窗本身。避免给弹窗容器设置overflow: auto，只给内容区域添加滚动属性，这样浏览器在处理输入框焦点滚动时，会自动结合内容容器的内边距避开工具栏。

方案4：监听视口变化，适配键盘弹出 #

部分移动端浏览器会在键盘弹出时改变视口高度，通过监听visualViewport的变化，在键盘弹出时调整聚焦输入框的位置：

window.visualViewport?.addEventListener('resize', () => {
  const activeElement = document.activeElement;
  if (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') {
    const footer = document.querySelector('.modal-footer');
    const inputBottom = activeElement.getBoundingClientRect().bottom;
    const footerTop = footer.getBoundingClientRect().top;
    
    if (inputBottom > footerTop) {
      activeElement.scrollIntoView({ block: 'end', behavior: 'smooth' });
    }
  }
});

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