隐藏iframe上的水平滚动条？

Question

我需要使用css，jquery或js隐藏iframe上的水平滚动条。

Answer 1

我建议用

的组合来做这件事

1. CSS overflow-y: hidden;
2. scrolling="no"（适用于HTML4）
3. 和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>

Answer 2

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

Answer 3

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

body {
    overflow:hidden;
}

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

http://jsfiddle.net/u5gLoav9/

此解决方案允许您：

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

• 适用于使用CSS overflow:hidden

的大多数浏览器

• 不需要JS或jQuery。

注意：

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

overflow-x: hidden;

Answer 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