当多个 iframe 使用 position: absolute 叠加在同一容器中时，仅靠 overflow: auto 无法触发滚动，需结合 display: block/none 切换可见性，并确保当前显示的 iframe 具备明确尺寸与可滚动内容。
当多个 iframe 使用 position: absolute 叠加在同一容器中时，仅靠 overflow: auto 无法触发滚动，需结合 display: block/none 切换可见性，并确保当前显示的 iframe 具备明确尺寸与可滚动内容。
在您提供的代码中，所有 iframe 均设置为 position: absolute 并共享同一父容器（#middle-section），这导致浏览器无法为每个 iframe 独立计算可滚动区域——尤其是当多个 iframe 同时存在于 DOM 中且高度均为 100vh 时，overflow 属性实际作用于 iframe 自身（而非其内部文档），而 iframe 的滚动行为取决于其内部页面是否超出自身尺寸，以及iframe 元素本身是否允许用户交互滚动。
关键问题在于：
✅ position: absolute + opacity: 0 仍会保留元素在渲染流中的占位和事件捕获能力，但不会禁用其对滚动事件的干扰；
❌ scrolling="yes" 是过时属性（HTML5 已废弃），现代浏览器忽略它；
❌ 所有 iframe 同时存在且高度设为 100vh，但只有当前激活的 iframe 应具备完整交互能力，其余应完全脱离布局流。
✅ 正确解决方案：用 display 替代 opacity 控制可见性
将隐藏的 iframe 设置为 display: none，仅让当前激活的 iframe 为 display: block。这样既能彻底移除非活跃 iframe 的布局影响，又能确保浏览器正确分配滚动上下文：
iframe {
width: 100%;
height: 100vh;
border: none;
position: absolute;
top: 0;
left: 0;
/* 移除 opacity 和 transition，改用 display */
}
iframe.show {
display: block;
}
/* 隐藏其他 iframe */
iframe:not(.show) {
display: none;
}
同时，在 JavaScript 中更新切换逻辑（保持原结构，仅微调）：
function showIframe(index) {
// 先隐藏全部
document.querySelectorAll("#middle-section iframe").forEach(iframe => {
iframe.classList.remove("show");
});
// 再显示目标
document.getElementById(`iframe${index}`).classList.add("show");
}
⚠️ 注意事项与补充建议
- 不要依赖 scrolling 属性：该属性已废弃，应通过 CSS 控制 iframe 内容滚动。若需强制启用内部滚动，可在 iframe 加载后注入样式（如通过 sandbox 或服务端配合），但更推荐让目标页面自身适配响应式设计。
- 确保目标页面可滚动：如果 iframe 源页面 高度不足 100vh，即使 iframe 尺寸足够，也不会出现滚动条。可通过开发者工具检查 iframe 内文档的实际高度。
-
移动端兼容性：iOS Safari 对 iframe 内滚动支持有限，建议添加 touch-action: auto 或在 iframe 上设置 style="-webkit-overflow-scrolling: touch"（仅限 iOS）：
<iframe ... style="-webkit-overflow-scrolling: touch;"></iframe>
- 性能优化：display: none 的 iframe 不会加载资源（除非已提前加载），但若需预加载，可使用 loading="lazy"（现代浏览器支持）并配合 visibility: hidden + position: absolute 组合，但此时务必为每个 iframe 单独设置 overflow: auto 容器包装（见下文进阶方案）。
? 进阶方案：带滚动容器的封装结构（推荐用于复杂场景）
若必须保留所有 iframe 始终在 DOM 中（例如需预加载或避免重复加载），可为每个 iframe 单独包裹一个 div 容器，并控制该容器的 overflow：
<div id="middle-section">
<div class="iframe-wrapper">
<iframe id="iframe1" src="..." class="show"></iframe>
</div>
<div class="iframe-wrapper">
<iframe id="iframe2" src="..."></iframe>
</div>
<!-- 其余同理 -->
</div>
对应 CSS：
.iframe-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: auto; /* 关键：滚动作用于此容器 */
}
.iframe-wrapper iframe {
width: 100%;
height: 100%; /* 注意：此处 height 设为 100% 而非 100vh */
border: none;
display: block;
}
.iframe-wrapper:not(.active) {
display: none;
}
此方式将滚动行为委托给外层容器，绕过 iframe 自身限制，兼容性更好，也便于统一控制滚动条样式。
综上，最简洁、可靠且符合标准的做法是：用 display: block/none 替代 opacity 切换 iframe，移除冗余 overflow 声明，确保当前 iframe 具备真实内容高度——这也是为何第 6 个 iframe “恰好能滚动”：它可能因加载顺序或内容高度偶然满足了可滚动条件，但不可复现、不可控。统一采用 display 方案，即可一劳永逸解决所有 iframe 的滚动问题。
