隐藏 iframe 上的水平滚动条？

Posted 2023-02-21

【中文标题】隐藏 iframe 上的水平滚动条？

【英文标题】：Hide horizontal scrollbar on an iframe?

【发布时间】：2011-06-18 21:50:12

【问题描述】：

我需要使用 css、jquery 或 js 隐藏 iframe 上的水平 scollbar。

【问题讨论】：

可能重复：Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar 和 others

iframe 与父页面不在同一个域中。

溢出-y：隐藏；无法在 Google Chrome、Safari 和 Opera 中运行。试试jsfiddle.net/m5Btd/3

【参考方案1】：

我建议结合使用

CSS overflow-y: hidden; scrolling="no"（用于 html4） 和seamless="seamless"（用于 HTML5）*

^{* seamless 属性具有标准中的 been removed，no browsers 支持它。}

---

.foo 
  width: 200px;
  height: 200px;
  overflow-y: hidden;

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

【讨论】：

我在 Chrome 15 上加载了您的示例，但仍然可以看到滚动条。

将scrolling="no" 属性添加到 iframe 似乎可以删除 Chrome 中的滚动条。

@Nick 至少在我的电脑上它不会在 chrome 上删除它。 img339.imageshack.us/img339/6685/chromelj.png

@l46kok 你的截图不包括scrolling="no"

请注意，目前任何主流浏览器都不支持 seemless 属性。 caniuse.com/#feat=iframe-seamless

【参考方案2】：

在你的 iframe 中设置 scrolling="no" 属性。

【讨论】：

虽然它得到了广泛的支持，但根据MDN，scrolling 属性已被弃用。

【参考方案3】：

如果允许您更改 iframe 内的文档代码，并且该内容仅在其父窗口中可见，则只需在您的 iframe 中添加以下 CSS：

body 
    overflow:hidden;

这里是一个非常简单的例子：

http://jsfiddle.net/u5gLoav9/

此解决方案允许您：

保持 HTML5 有效，因为它不需要 iframe 上的 scrolling="no" 属性（HTML5 中的此属性已被弃用）。

适用于大多数使用 CSS 的浏览器 overflow:hidden

不需要 JS 或 jQuery。

注意事项：

要禁止水平滚动条，请改用此 CSS：

overflow-x: hidden;

【参考方案4】：

此答案仅适用于使用 Bootstrap 的网站。 Bootstrap 的响应式嵌入功能负责滚动条。

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/WsFWhL4Y84Y"></iframe>
</div> 

jsfiddle：http://jsfiddle.net/00qggsjj/2/

http://getbootstrap.com/components/#responsive-embed