Html 在 iframe 上隐藏水平滚动条？

Hide horizontal scrollbar on an iframe?

提问by nkcmr

I need to hide the horizontal scollbar on an iframe using css, jquery or js.

我需要使用 css、jquery 或 js 在 iframe 上隐藏水平 scollbar。

回答by Chase Florell

I'd suggest doing this with a combination of

我建议这样做的组合

1. CSS overflow-y: hidden;
2. scrolling="no"(for HTML4)
3. and seamless="seamless"(for HTML5)*

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

^{* The seamlessattribute has been removedfrom the standard, and no browserssupport it.}

^{* 该seamless属性已从标准中删除，尚无浏览器支持。}

---

---

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

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

回答by Rahul Dadhich

set scrolling="no"attribute in your iframe.

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

回答by GibboK

If you are allowed to change the code of the document inside your iframeand that content is visible only using its parent window, simply add the following CSS in your iframe:

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

body {
    overflow:hidden;
}

Here a very simple example:

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

http://jsfiddle.net/u5gLoav9/

http://jsfiddle.net/u5gLoav9/

This solution allow you to:

此解决方案允许您：

• Keep you HTML5 valid as it does not need scrolling="no"attribute on the iframe(this attribute in HTML5 has been deprecated).

• Works on the majority of browsers using CSS overflow:hidden

• No JS or jQuery necessary.

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

• 适用于大多数使用 CSS溢出的浏览器：隐藏

• 不需要 JS 或 jQuery。

Notes:

笔记：

To disallow scroll-bars horizontally, use this CSS instead:

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

overflow-x: hidden;

回答by Razan Paul

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

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

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