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

Hide scrollbar from iframe and replace it with scrollbar on the page

本文关键字：滚动条 替换 iframe 隐藏      更新时间：2023-09-26

我有一个带有垂直滚动条的iframe。我需要把它删除，并在页面上设置这个小标题栏。因此，当我需要滚动iframe的内容时，我可以使用页面滚动条。我确实在iframe中隐藏了垂直滚动条，但现在，我根本没有了。我使用：

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

这只适用于谷歌chrome，但不适用于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的内容。感谢

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

您可以将JavaScript添加到IFRAME中的页面，以便在加载和调整大小时设置父级中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>

这似乎很好用：

Html 5/CSS

.ifm {
    width: 1200px;
    height:800px;
    overflow-y: hidden;
}
<iframe src="https://bing.com" 
    class="ifm" 
    scrolling="no" 
    seamless="seamless">
</iframe>

基于此帖子。

相关文章：