如何修复iOS Safari中div内嵌套iframe的滚动问题

我之前也踩过iOS Safari里嵌套iframe滚动失效的大坑，你提到的overflow:auto; -webkit-overflow-scrolling: touch;确实是基础配置，但嵌套场景下iOS有特殊的渲染限制，给你几个亲测有效的解决方案：

1. 确保父容器与iframe都有明确的高度约束 #

iOS Safari对滚动容器的高度非常敏感，尤其是嵌套iframe的场景，必须给iframe的直接父容器和iframe本身设置明确的高度值（不能是auto），同时配合滚动属性：

/* 父容器样式 */
.iframe-container {
  width: 100%;
  height: 500px; /* 也可使用视口单位如100vh适配不同屏幕 */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* iframe样式 */
.iframe-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

同时，别忘了给iframe内部页面的html和body也设置高度和滚动属性，避免内容被截断：

/* iframe内部页面的全局样式 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

2. 添加iframe的scrolling="yes"属性（兼容旧版iOS） #

虽然HTML5标准中scrolling属性已被废弃，但部分旧版iOS Safari仍依赖这个属性来识别可滚动的iframe，建议配合CSS一起使用：

<div class="iframe-container">
  <iframe src="your-content.html" scrolling="yes"></iframe>
</div>

3. 排查是否有其他元素阻止滚动 #

• 检查父容器或iframe是否被设置了pointer-events: none;，这个属性会直接禁用触摸交互
• 检查是否有全局的touchmove事件监听阻止了默认行为（比如某些下拉刷新或手势库），需要给iframe区域添加例外：

document.addEventListener('touchmove', function(e) {
  // 当触摸目标是iframe或其内部元素时，阻止事件冒泡
  if (e.target.tagName === 'IFRAME' || e.target.closest('iframe')) {
    e.stopPropagation();
  }
}, { passive: false });

4. 简化嵌套层级 #

iOS Safari的渲染引擎对多层嵌套的滚动容器支持有限，如果你的页面有超过2层的滚动嵌套（比如iframe里还有滚动容器），尽量简化布局，减少嵌套层级，或者将内部滚动逻辑移到父页面处理。

测试的时候记得用真实的iPad设备（模拟器有时候会有渲染偏差），并且确保iframe的内容高度超过容器高度——如果内容不够长，iOS不会触发滚动行为哦！

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