绝对定位Iframe无法滚动问题求助（仅第6个iframe可正常滚动）

问题分析 #

当前架构下，绝对定位的iframe滚动失效，但第6个iframe正常，核心原因有两点：

• iframe尺寸设置不合理：使用height:100vh会基于视口高度计算，而非父容器#middle-section的实际可用高度，导致滚动区域判定异常。
• 嵌入页面的CSS限制：前5个嵌入页面大概率设置了body/html { overflow:hidden; }，直接禁用了页面内部的滚动能力，而第6个页面无此限制。

解决方案 #

1. 调整iframe的CSS定位与尺寸

修改iframe的样式，让它完全填充父容器并正确触发滚动：

iframe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; /* 用上下左右定位替代固定宽高，确保完全覆盖父容器 */
  border: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  overflow: auto; /* 用CSS启用滚动控制，替代已废弃的scrolling属性 */
}

替换原来的width:100%; height:100vh，这样iframe会基于父容器的尺寸自适应，滚动区域正常生效。

2. 检查嵌入页面的CSS

如果嵌入页面的代码中存在以下样式，需要移除：

body, html {
  overflow: hidden;
}

该样式会强制禁用页面内部的滚动，导致iframe无法触发滚动行为。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Your Website</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
        transition: background-color 0.3s ease;
        position: relative;
      }

      #container {
        display: flex;
        width: 100%;
        height: 100vh;
      }

      #left-column,
      #right-column {
        text-align: center;
      }

      #left-column {
        width: 20%;
        background-color: #ddd;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transition: width 0.3s ease, background-color 0.3s ease;
      }

      #left-column:hover {
        width: 25%;
        background-color: rgb(50, 46, 46);
        color: #fff;
      }

      #left-column nav {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
      }

      #left-column ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      #left-column li {
        height: fit-content;
        font-size: 16px;
        margin-top: 30px;
        cursor: pointer;
        transition: font-size 0.3s ease, color 0.3s ease;
      }

      #left-column li:hover {
        font-size: 18px;
        color: rgb(140, 142, 148);
      }

      #middle-section {
        margin-left: 10px;
        margin-right: 10px;
        width: 60%;
        height: 100vh;
        background-color: #fff;
        position: relative;
        transition: width 0.3s ease, background-color 0.3s ease;
      }

      iframe {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: none;
        opacity: 0;
        transition: opacity 0.3s ease;
        overflow: auto;
      }

      iframe.show {
        opacity: 1;
      }

      #middle-section iframe {
        display: block;
      }

      #right-column {
        width: 20%;
        background-color: #ddd;
        padding: 20px;
        box-sizing: border-box;
        overflow: hidden;
        transition: width 0.3s ease, background-color 0.3s ease;
      }

      #right-column:hover {
        width: 25%;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="left-column">
        <nav>
          <ul>
            <li onclick="showIframe(1)">Fall Prep Coaches</li>
            <li onclick="showIframe(2)">Team Real Speed</li>
            <li onclick="showIframe(3)">Real Speed Staff</li>
            <li onclick="showIframe(4)">Small Group Training</li>
            <li onclick="showIframe(5)">Off-Ice Training</li>
            <li onclick="showIframe(6)">Tryouts</li>
          </ul>
        </nav>
      </div>

      <div id="middle-section">
        <iframe
          id="iframe1"
          class="show"
          src="https://nefphlcoaches.eu/"
          frameborder="0"
        ></iframe>
        <iframe
          id="iframe2"
          src="https://nefphlcoaches.eu/RealSpeed2/index2.html"
          frameborder="0"
        ></iframe>
        <iframe
          id="iframe3"
          src="https://nefphlcoaches.eu/RealSpeed/index.html"
          frameborder="0"
        ></iframe>
        <iframe
          id="iframe4"
          src="https://nefphlcoaches.eu/SGT/index.html"
          frameborder="0"
        ></iframe>
        <iframe
          id="iframe5"
          src="https://nefphlcoaches.eu/Training/index.html"
          frameborder="0"
        ></iframe>
        <iframe
          id="iframe6"
          src="https://nefphlcoaches.eu/tryout/index.html"
          frameborder="0"
        ></iframe>
      </div>

      <div id="right-column">
        <h2>Right Column</h2>
        <p>Your content goes here.</p>
      </div>
    </div>

    <script>
      function showIframe(index) {
        document.querySelectorAll("iframe").forEach((iframe) => {
          iframe.classList.remove("show");
        });

        document.getElementById(`iframe${index}`).classList.add("show");
      }
    </script>
  </body>
</html>

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