如何在iframe中隐藏水平滚动条？

Question

我需要使用CSS、jQuery或JS隐藏iframe中的水平滚动条。

- nkcmr

---

可能重复：Safari/Chrome（Webkit）-无法隐藏iframe垂直滚动条和其他。 - Matt Ball

iframe 不在与父页面相同的域中。 - nkcmr

overflow-y: hidden; 在Google Chrome、Safari和Opera中无效。请使用http://jsfiddle.net/m5Btd/3/进行尝试。 - phangia2712

Answer 1

建议使用以下组合方式达到效果：

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>

- Chase Florell

---

我在 Chrome 15 上加载了你的示例，仍然看到滚动条。 - Dan

将“scrolling =”no“”属性添加到iframe中似乎可以在Chrome中去除滚动条。 - Nick

@Nick 至少在我的电脑上，它在 Chrome 上没有移除它。http://img339.imageshack.us/img339/6685/chromelj.png - TtT23

@l46kok 你的截图没有包含 scrolling="no"。 - Chase Florell

注意，目前没有任何主流浏览器支持“seamless”属性。http://caniuse.com/#feat=iframe-seamless - Liyali

Answer 2

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

- Rahul Dadhich

---

尽管它得到了广泛的支持，但根据MDN，scrolling属性已被弃用。 - JamesQMurphy

Answer 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;

- GibboK

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/

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

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

- Razan Paul