Question

我有iframe和垂直滚动条。我需要删除它并在页面上有这个scollbar。所以，当我需要滚动iframe的内容时，我可以使用页面滚动条。我确实隐藏了iframe中的垂直滚动条，但现在我根本没有它。我用：

iframe::-webkit-scrollbar {  
    display: none;
  }

这仅适用于谷歌浏览器，但它不适用于Firefox和Internet Explorer。我尝试了以下所有方法：

iframe::-moz-scrollbar {display:none;}
iframe::-o-scrollbar {display:none;}
iframe::-google-ms-scrollbar {display:none;}
iframe::-khtml-scrollbar {display:none;}

但他们没有用。

所以，我需要你的帮助来隐藏所有浏览器的iframe滚动条。并且能够从页面的滚动条滚动iframe的内容。谢谢

Answer 1

根据IE的版本，有时使用iframe {overflow: hidden;}会隐藏滚动条。但是将scrolling="no"放在iframe中通常适用于所有浏览器。

Answer 2

您可以在IFRAME中向页面添加JavaScript，在加载时和调整大小时，在父级中设置IFRAME的高度。该页面需要与父级页面存在于同一域中，尽管您可以通过浏览器安全设置来克服此问题。

在页面内（示例使用jQuery）：

if (window != window.parent)
    $(function() {
        var resize = function() { $(window.parent.document).find("IFRAME[name='" + window.name + "']").height($(document).height()); };
        $(window.parent).resize(resize);
        resize();
    });

您需要在父页面上为iframe指定名称：

<iframe name="anything" ...></iframe>

Answer 3

这似乎工作正常：

Html 5 / CSS

＆＃13;

.ifm {
    width: 1200px;
    height:800px;
    overflow-y: hidden;
}

＆＃13;

<iframe src="https://bing.com" 
    class="ifm" 
    scrolling="no" 
    seamless="seamless">
</iframe>

＆＃13;

基于this帖子。

隐藏iframe中的滚动条并将其替换为页面上的滚动条

3 个答案: