在 iframe 上隐藏水平滚动条？

我建议这样做的组合

1. CSS overflow-y: hidden;
2. (就 HTML4而言)
3. 和 seamless="seamless"(对于 HTML5) *

^{* seamless属性具有来自标准的 been removed，并且 没有浏览器支持它。}

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

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

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

This answer is only applicable for websites which use Bootstrap. The responsive embed feature of the Bootstrap takes care of the scrollbars.

<!-- 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>

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

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

如果你被允许在你的 iframe中更改文档的代码，而且内容只能通过它的父窗口才能看到，只需要在你的 iframe中添加以下 CSS:

body {
overflow:hidden;
}

这里有一个非常简单的例子:

Http://jsfiddle.net/u5gloav9/

这个解决方案允许你:

• 保持 HTML5的有效性，因为它不需要 iframe上的 scrolling="no"属性(这个属性在 HTML5中已经被废弃了)。

• 可以在大多数浏览器上使用 CSS 溢出: 隐藏

• 不需要 JS 或 jQuery。

备注:

若要禁止水平滚动条，请使用以下 CSS 代替:

overflow-x: hidden;