Question

如何让 iframe 禁用滚动，那么只有可用于滚动的浏览器？我知道你可以设置scrolling="no"，但这不是我想要的。如果内容超出框架，我想使用浏览器滚动而不是iframe。怎么办？

我有不同高度的不同页面，这些页面将填入iframe;因此，手动设置高度不是一种选择。所有overflow:hidden等都已尝试过，但无济于事。

Answer 1

检查这个小提琴。

Fiddle

<强> HTML

<div class="box">
    <iframe src="http://www.adrianenriquez.com"></iframe>
</div>
<div class="box">
    <iframe src="http://jsfiddle.net/GbeLD/embedded/result/"></iframe>
</div>
<div class="box">
    <iframe src="http://www.plusia.it/public/prodotti/6/low/ser-11027-w.jpg"></iframe>
</div>

<强> CSS

html, body, iframe {
    height:100%;
    width:100%;
}
.box {
    width:50%;
    height:50%;
    float:left;
}
iframe {
    overflow:auto;
}

根据<iframe>的内容动态/自动更改滚动。

方框1 - X和Y滚动
方框2 - Y滚动
方框3 - 无滚动

Answer 2

我不知道你要搜索的代码，但你可以在右侧创建一个滚动条，它实际上不是浏览器的滚动条，但看起来很相似。并且，浏览器的滚动条不能用于控制内部元素。

但是，您可以将iframe的高度设置为一个非常大的值，因此所有页面都适合内部。这将使您的页面变长，使浏览器的滚动条能够滚动页面。：）

Answer 3

如果网页位于同一个域中，您可以将此页面的高度设置为等于iframe的内容scrollHeight。将iframe设置为fixed位置，只需使用jQuery scroll()事件镜像滚动浏览器，如下所示：

$('iframe').load(function() {
    var h = $('iframe').contents().find('body')[0].scrollHeight;
    $('body').height(h)

    $(window).scroll(function() {
        var winTop = $(this).scrollTop();
        $('iframe').contents().find('html, body').scrollTop(winTop);
    });
});

iframe：删除iframe滚动并使用窗口滚动查看iframe的内容

3 个答案:

Fiddle