隐藏iframe上的水平滚动条？

110

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

— nkcmr
source

1

可能重复：Safari /铬（WebKit的） -无法隐藏的iframe垂直滚动条和其他人

— 马特·鲍尔

iframe与父页面不在同一个域中。

— nkcmr 2011年

溢出y：隐藏；无法在Google Chrome，Safari和Opera中使用。使用jsfiddle.net/m5Btd/3进行

— phangia2712

208

我建议结合使用

的CSS overflow-y: hidden;
scrolling="no" （对于HTML4）
~~和seamless="seamless"（对于HTML5）~~*

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

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

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

展开摘要

— 蔡斯·弗洛雷尔
source

9

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

— 丹

61

将scrolling="no"属性添加到iframe似乎会删除Chrome中的滚动条。

— 尼克

2

@Nick至少在我的电脑上不会将其删除。img339.imageshack.us/img339/6685/chromelj.png

— l46kok

1

@ l46kok您的屏幕快照不包括scrolling="no"

— Chase Florell

3

请注意，任何主要浏览器当前均不支持hideless属性。caniuse.com/#feat=iframe-seamless

— Liyali 2014年

26

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

— 拉胡尔·达迪奇
source

15

如果允许您更改内部文档的代码，iframe并且只能通过其父窗口看到该内容，只需在您的文档中添加以下CSS iframe：

body {
    overflow:hidden;
}

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

http://jsfiddle.net/u5gLoav9/

该解决方案使您能够：

使HTML5有效，因为它不需要scrolling="no"上的iframe属性（不赞成使用HTML5中的此属性）。
在大多数使用CSS 溢出的浏览器上均可使用：隐藏
无需JS或jQuery。

笔记：

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

overflow-x: hidden;

— GibboK
source

2

此答案仅适用于使用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/#sensitive-embed

— 拉赞·保罗
source