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

【问题标题】：Hide scrollbar from iframe and replace it with scrollbar on the page从 iframe 隐藏滚动条并将其替换为页面上的滚动条
【发布时间】：2016-04-19 02:22:30
【问题描述】：

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

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

这仅适用于 google 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 的内容。谢谢

【问题讨论】：

iframe 上的scrolling="no" 属性怎么样？
stackoverflow.com/questions/4856746/…的可能重复
感谢您帮助我。
我之前确实试过。是的，它使用所有浏览器从 iframe 中删除了滚动条，但我失去了滚动功能。我没有在页面上。

标签： javascript jquery css iframe scrollbar

【解决方案1】：

这似乎工作得很好：

HTML 5/CSS

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

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

基于this 帖子。

【讨论】：

但这将禁用滚动，我需要滚动，但从页面而不是 iframe。谢谢。
请注意，用户滚动的是父窗口（即“页面”），而不是 iFrame，因为它只是滚动已禁用的 iFrame。如果这不是你想要的，那么我不明白你的问题。那么请进一步说明。

【解决方案2】：

您可以将 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>

【讨论】：

我正在尝试使用此解决方案。我的问题是我在构建网站时确实使用了 prestashop，而这个软件使用 iframe 来弹出窗口并在这个 iframe 中使用 fancybox。问题我找不到 iframe 标签来给它命名。我的意思是我不知道哪个文件有这个 iframe。另外，如果我找到了框架并给了它一个名字，请在你的 jQuery 代码中，我应该在哪里添加这个名字？谢谢！
在 IFRAME 中，名称从 window.name 得知——如果 IFRAME 是为弹出窗口自动生成的，则可能已经提供了名称。
谢谢。我确实使用了这段代码，但它对我不起作用。它使滚动条再次出现在 iframe 上并使 iframe 更长（添加额外的空白空间）。

【解决方案3】：

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

【讨论】：

谢谢。我需要保持滚动而不是从 iframe 的滚动条滚动，我需要从页面滚动条滚动。
所以您希望 iframe 在宽度和高度上拉伸 100%，让滚动条消失，并让页面的自然滚动条滚动 iframe？