iOS Safari下元素滚动失效问题求助

iOS Safari 对滚动容器的渲染逻辑有特殊处理，当容器使用 vh 结合 calc 计算高度时，即便样式面板显示 overflow: auto 已正确应用，内核也可能未将其识别为可滚动区域。此外，iOS 要求滚动容器具备明确的触发条件，缺少相关属性时会默认锁定滚动。

解决方案1：添加 -webkit-overflow-scrolling: touch #

这是修复 iOS 滚动问题的基础操作，强制开启硬件加速滚动，同时让浏览器正确识别滚动容器：

.scroll-container {
  height: calc(100vh - 200px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

对应 HTML：

<div class="scroll-container">
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
</div>

解决方案2：替换 vh 单位，规避视口计算偏差 #

iOS 的 vh 会包含顶部状态栏和底部导航栏高度，导致 calc(100vh - 200px) 的实际高度可能不符合预期，甚至容器内容不足以触发滚动。可以改用基于父容器的百分比高度：

/* 先确保根元素占满视口 */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.scroll-container {
  height: calc(100% - 200px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

解决方案3：强制触发滚动事件（极端场景） #

如果以上方法无效，可通过触摸事件监听手动处理滚动边界，避免浏览器阻止滚动：

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

scrollContainer.addEventListener('touchstart', function(e) {
  this.dataset.startY = e.touches[0].clientY;
});

scrollContainer.addEventListener('touchmove', function(e) {
  const startY = Number(this.dataset.startY);
  const currentY = e.touches[0].clientY;
  const { scrollTop, scrollHeight, clientHeight } = this;

  // 处理顶部/底部边界的滚动行为，防止浏览器默认阻止
  if ((scrollTop === 0 && startY < currentY) || (scrollTop + clientHeight >= scrollHeight && startY > currentY)) {
    e.preventDefault();
  }
});

额外注意事项 #

• 滚动容器的父元素不要设置 overflow: hidden 或 touch-action: none，否则会阻断滚动事件传递。
• 若滚动容器使用 position: fixed，需额外处理视口高度的计算偏差。

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