将 html 网页嵌入另一个网页并使用父滚动条滚动它

Question

我想在另一个（父级）html 网页中显示一个 html 网页的内容，将嵌入的网页拉伸到父级的宽度并删除滚动条嵌入网页，同时能够使用主页的滚动条向下滚动嵌入网页的内容，因为嵌入内容的高度太长而无法容纳。我尝试使用类似问题的答案中的代码，包括：

    <iframe style='overflow:hidden; width:100%; height:100%' scrolling = "no" src="annotated list of courses.html" frameborder="0" width="100%" height="100%"> </iframe>

但我无法达到预期的效果。我希望能够使用父页面的滚动条滚动嵌入式网页的内容。这是可能的（不需要将代码从嵌入式 HTML 复制到父代码）以及如何实现？谢谢

Answer 1

我通过为嵌入网页指定一个大于或等于网页高度的特定高度解决了这个问题，如下所示：

<div id="content" class="content content-full" style="margin-top: -40px;">
    <iframe style='overflow-y:hidden; width:100%; height:17560px' src="annotated list of courses.html" frameborder="0" width="100%" height="17560px" type="text/html"> </iframe>
</div>

我希望这也能为其他人解决问题，任何更好或不同的解决方案也将受到赞赏。

ps：您必须指定一个高度，该高度至少等于嵌入网页或元素的内容高度，滚动条才会消失。

Answer 2

我用两个 DIV 解决了这个问题，一个在另一个里面。

<div style="overflow-y: hidden; border: 2px solid black; width: 300px; height: 300px; position:absolute; left: 100px; top: 100px">
    <div style="margin-top: -100px; width: 300px; height: 400px">
        <iframe scrolling="no" style='pointer-events: none; width:100%; height: 100%' src="https://earth.nullschool.net/#current/wind/surface/level/orthographic=-325.19,32.21,3000/loc=35.073,31.923" frameborder="0" type="text/html"></iframe>
    </div> 
</div>

我通过设置 scrolling="no"
禁用了滚动条我通过设置 style='pointer-events: none;'

来阻止用户点击

这是一个工作示例 - https://jsfiddle.net/q46L1ynv/

将 html 网页嵌入另一个网页并使用父滚动条滚动它

Embed an html web-page inside another one and scroll it using the parent scollbar

html

css

embed

iframe