移动端搜索结果列表在输入时被虚拟键盘挡住如何解决？

爱学习的欢欢提问于 2026-02-10 08:53:27 阅读 15

交互

大家好，我在做搜索功能时遇到个怪问题。当用户输入搜索词后，点击搜索结果列表时，虚拟键盘弹出导致列表底部被遮挡，无法滑动到底部。

我尝试给搜索结果容器加了overflow-y: auto和固定高度，但滑动时底部依然被遮住。代码如下：


.search-results {
  position: fixed;
  top: 50px;
  bottom: 0;
  width: 100%;
  max-height: calc(100% - 60px);
  overflow-y: auto;
}

后来试着在输入时动态调整bottom值，但键盘高度计算不准，不同机型表现差异很大。有没有更稳定的解决方案？

搜索交互搜索结果

我来解答赞 5 收藏

反馈

1 条解答

司马恒鑫 Lv1

这问题我踩过坑，核心是别用 fixed 定位死 bottom，因为键盘弹起时页面可视高度变了，fixed 元素会错乱。更稳定的做法是用 JS 监听窗口高度变化来动态调整容器高度。

关键是监听 window 的 resize 事件，当虚拟键盘弹出时，window.innerHeight 会变小，这时候重新计算列表的最大高度。虽然不同机型键盘高度不一样，但通过实时获取当前视口高度就能自适应。

你可以这样改：

function adjustResultHeight() {

  const results = document.querySelector('.search-results');

  const headerHeight = 50; // 搜索框高度

  const availableHeight = window.innerHeight - headerHeight;

  results.style.maxHeight = availableHeight + 'px';

}



// 初始化

adjustResultHeight();



// 键盘弹出/收起时触发

window.addEventListener('resize', adjustResultHeight);

CSS 去掉 bottom: 0 和 max-height 那些固定值，只保留基础滚动设置：

.search-results {

  position: absolute;

  top: 50px;

  left: 0;

  right: 0;

  overflow-y: auto;

  /* max-height 交给 JS 动态控制 */

}

另外记得在移动端测试时加上 viewport meta 标签，不然 height 计算会不准：

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

这套方案在 iOS 和安卓主流浏览器都跑过，兼容性还行。唯一注意点是有些安卓机 resize 触发时机有点延迟，可以加个 setTimeout 延后执行一次调整，或者用 focusin/focusout 事件辅助判断输入框聚焦状态。

2026-02-10 09:01