JavaScript解决iOS键盘与地址栏遮挡内容导致无法滚动到底的问题

针对iOS设备上固定容器内的滚动区域在键盘弹出/收起时无法滚动到最底部的问题，可尝试以下几种解决思路：

1. 替换容器定位方式 #

iOS Safari对position: fixed元素的视口高度计算存在兼容性问题，键盘弹出时会错误计算容器高度。将外层容器的定位改为relative或static，并通过min-height: 100vh确保占满视口：

#container {
  position: relative;
  min-height: 100vh;
}

#scroll-container {
  position: relative;
  top: 25px;
  height: calc(100vh - 25px);
  overflow: auto;
}

2. 动态调整滚动区域高度 #

监听键盘弹出/收起事件（输入框的focus/blur）和窗口resize事件，实时重新计算滚动容器的高度，适配视口变化：

const scrollContainer = document.getElementById('scroll-container');
const input = document.querySelector('input');

function updateScrollHeight() {
  const viewportHeight = window.innerHeight;
  scrollContainer.style.height = `calc(${viewportHeight}px - 25px)`;
}

input.addEventListener('focus', updateScrollHeight);
input.addEventListener('blur', updateScrollHeight);
window.addEventListener('resize', updateScrollHeight);

3. 优化iOS滚动行为 #

给滚动容器添加-webkit-overflow-scrolling: touch属性，不仅能提升iOS上的滚动流畅度，还能修复部分因滚动机制导致的高度计算异常：

#scroll-container {
  position: absolute;
  top: 25px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

4. 改用高度计算替代bottom定位 #

避免依赖bottom: 0来确定滚动容器的高度，改用top值结合calc计算高度，确保iOS视口变化时高度能正确更新：

#scroll-container {
  position: absolute;
  top: 25px;
  left: 0;
  right: 0;
  height: calc(100% - 25px);
  overflow: auto;
}

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