键盘遮挡Dropdown Widget：下拉菜单选项被遮挡的解决方案咨询

针对下拉菜单被键盘遮挡的问题，可以尝试以下几种实用方案：

• 动态调整菜单弹出方向
  展开菜单前，计算触发元素的位置、视口剩余空间和菜单高度：如果元素下方空间不足以容纳菜单，就让菜单向上弹出，反之则向下。
  示例代码：

  const trigger = document.querySelector('.dropdown-trigger');
  const menu = document.querySelector('.dropdown-menu');
  
  trigger.addEventListener('click', () => {
    const triggerRect = trigger.getBoundingClientRect();
    const menuHeight = menu.offsetHeight;
    const viewportHeight = window.innerHeight;
    const bottomSpace = viewportHeight - triggerRect.bottom;
    
    if (bottomSpace < menuHeight) {
      menu.style.top = `${triggerRect.top - menuHeight}px`;
    } else {
      menu.style.top = `${triggerRect.bottom}px`;
    }
    menu.classList.toggle('show');
  });
  

• 监听事件自动滚动页面
  在移动端，键盘弹出会触发resize或元素focus事件，此时将菜单或当前聚焦的选项滚动到可视区域：

  // 聚焦选项时自动滚动到中间
  document.querySelectorAll('.dropdown-option').forEach(option => {
    option.addEventListener('focus', () => {
      option.scrollIntoView({ behavior: 'smooth', block: 'center' });
    });
  });
  
  // 窗口尺寸变化时调整菜单位置
  window.addEventListener('resize', () => {
    const activeMenu = document.querySelector('.dropdown-menu.show');
    activeMenu?.scrollIntoView({ behavior: 'smooth', block: 'center' });
  });
  

• 优化移动端视口设置
  修改HTML的视口meta标签，让浏览器在键盘弹出时重新计算视口高度：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, resize=both">
  

• 改用原生下拉组件
  原生<select>标签在移动端会自动适配键盘弹出逻辑，系统会处理菜单显示位置，无需额外开发：

  <select>
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
  </select>
  

• 给菜单添加滚动限制
  若菜单选项过多，设置最大高度并开启纵向滚动，用户可通过滚动查看被遮挡的选项：

  .dropdown-menu {
    max-height: 200px;
    overflow-y: auto;
  }
  

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