防止 iframe 内的可滚动容器影响 iframe 外的站点答案

【问题标题】：Prevent scrollable container within iframe from affecting site outside iframe防止 iframe 内的可滚动容器影响 iframe 外的站点
【发布时间】：2022-11-12 13:55:12
【问题描述】：

我正在开发一个将终端集成到网站的网站。终端在 iframe 中使用 xtermjs 进行渲染。所以代码完成的html看起来是这样的：

<iframe src="http://localhost/term-shell/?course=nginx" class="display-under-terminal">
    <html data-lt-installed="true">

        <head>...</head>

        <body style="overflow: hidden;">
            <div id="console" class=" docker-browser-console">
                <!-- Everything from here on out gets generated by xterm -->
                <div dir="ltr" class="terminal xterm" tabindex="0">
                    <div class="xterm-viewport" style="background-color: rgb(0, 0, 0); width: 1171px;">
                        <div class="xterm-scroll-area" style="height: 306px;"></div>
                    </div>
                    <div class="xterm-screen" style="width: 1161px; height: 119px;">
                        <div class="xterm-helpers"><textarea class="xterm-helper-textarea" aria-label="Terminal input"
                                aria-multiline="false" autocorrect="off" autocapitalize="off" spellcheck="false"
                                tabindex="0"
                                style="left: 0px; top: 102px; width: 9px; height: 17px; line-height: 17px; z-index: -5;"></textarea><span
                                class="xterm-char-measure-element" aria-hidden="true"
                                style="font-family: courier-new, courier, monospace; font-size: 15px;">W</span>
                            <div class="composition-view"></div>
                        </div><canvas class="xterm-text-layer" style="z-index: 0; width: 1161px; height: 119px;"
                            width="1161" height="119"></canvas><canvas class="xterm-selection-layer"
                            style="z-index: 1; width: 1161px; height: 119px;" width="1161" height="119"></canvas><canvas
                            class="xterm-link-layer" style="z-index: 2; width: 1161px; height: 119px;" width="1161"
                            height="119"></canvas><canvas class="xterm-cursor-layer"
                            style="z-index: 3; width: 1161px; height: 119px;" width="1161" height="119"></canvas>
                        <div class="xterm-decoration-container"></div>
                    </div>
                </div>
            </div>
            <script src="bundle.js"></script>
        </body>
    </html>
</iframe>

问题是当我在终端内滚动并到达底部或顶部时，父页面会滚动，这应该被阻止。

我已经尝试设置xterm-viewport 的overscroll-behavior 是可滚动容器，但none 或contain 似乎都不起作用。

我还尝试停止滚动事件的传播，但这也没有用。

【问题讨论】：

标签： javascript html css xtermjs

【解决方案1】：

试一试。

<style>
    body {
        position: relative;
    }
    .outsideContainer {
    position: sticky;
     top: 0;
    }
    .exampleIframe {
      max-height: 20rem;
      overflow: scroll;
    }
</style>

【讨论】：