如何阻止iframe内可滚动容器触发父页面滚动

我正在开发一个集成终端功能的网站，终端通过iframe嵌入并使用xterm.js渲染，最终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、阻止滚动事件传播，均未生效。

1. 全局设置iframe页面的overscroll行为 #

xterm的滚动容器由动态生成，单独给xterm-viewport加样式可能时机不对。在iframe页面的CSS中添加全局覆盖：

html, body {
    overscroll-behavior: contain;
}
.xterm-viewport {
    overscroll-behavior: contain !important;
}

确保所有滚动区域的连锁滚动被阻断。

2. 父页面监听iframe滚轮事件（同域场景） #

如果iframe与父页面同域，在父页面中精准拦截边界滚动的默认行为：

const iframe = document.querySelector('.display-under-terminal');
iframe.contentWindow.addEventListener('wheel', (e) => {
    const viewport = iframe.contentDocument.querySelector('.xterm-viewport');
    const isAtTop = viewport.scrollTop === 0;
    const isAtBottom = viewport.scrollTop + viewport.clientHeight >= viewport.scrollHeight;
    
    // 滚动到边界时阻止事件传递
    if ((isAtTop && e.deltaY < 0) || (isAtBottom && e.deltaY > 0)) {
        e.preventDefault();
        e.stopPropagation();
    }
}, { passive: false });

注意必须设置passive: false才能调用preventDefault。

3. 通过xterm.js API监听滚动状态 #

直接利用xterm的内置事件控制滚动行为，避免DOM操作的兼容性问题：

const term = new Terminal();
term.onScroll((scrollPosition) => {
    const isAtTop = scrollPosition === 0;
    const isAtBottom = scrollPosition >= term.rows - term.viewportRows;
    
    // 临时绑定滚轮事件，阻止边界滚动传递
    document.addEventListener('wheel', (e) => {
        if ((isAtTop && e.deltaY < 0) || (isAtBottom && e.deltaY > 0)) {
            e.preventDefault();
        }
    }, { once: true });
});

4. 父页面给iframe添加overscroll样式 #

在父页面的CSS中直接给iframe元素设置样式，一步阻断滚动传递：

.display-under-terminal {
    overscroll-behavior: contain;
}

内容的提问来源于stack exchange，提问作者Streimel Stefan