隐藏 iframe 上的水平滚动条？答案

【问题标题】：Hide horizontal scrollbar on an iframe?隐藏 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

标签： html iframe scrollbar hide

【解决方案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

【讨论】：