隐藏iframe上的水平滚动条？

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

Answer 1

我会build议这样做的组合

1. CSS overflow-y: hidden;
2. scrolling="no" （对于HTML4）
3. 和seamless="seamless" （对于HTML5） *

^{* seamless属性已经从标准中删除 ， 没有浏览器支持它。}

---

 .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/

这个解决scheme可以让你：

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

• 在使用CSS 溢出的大多数浏览器上工作：隐藏

• 没有JS或jQuery的必要。

笔记：

要不允许水平滚动条，请使用下面的CSS代替：

 overflow-x: hidden; 

Answer 4

这个答案只适用于使用Bootstrap的网站。 Bootstrap的响应式embeddedfunction负责处理滚动条。

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