【问题标题】:Hide horizontal scrollbar on an iframe?隐藏 iframe 上的水平滚动条?
【发布时间】:2011-06-18 21:50:12
【问题描述】:

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

【问题讨论】:

标签: html iframe scrollbar hide


【解决方案1】:

我建议结合使用

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

* seamless 属性具有标准中的 been removedno browsers 支持它。


.foo {
  width: 200px;
  height: 200px;
  overflow-y: hidden;
}
<iframe src="https://bing.com" 
        class="foo" 
        scrolling="no" >
</iframe>

【讨论】:

  • 我在 Chrome 15 上加载了您的示例,但仍然可以看到滚动条。
  • scrolling="no" 属性添加到 iframe 似乎可以删除 Chrome 中的滚动条。
  • @Nick 至少在我的电脑上它不会在 chrome 上删除它。 img339.imageshack.us/img339/6685/chromelj.png
  • @l46kok 你的截图不包括scrolling="no"
  • 请注意,目前任何主流浏览器都不支持 seemless 属性caniuse.com/#feat=iframe-seamless
【解决方案2】:

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

【讨论】:

  • 虽然它得到了广泛的支持,但根据MDNscrolling 属性已被弃用。
【解决方案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;

【讨论】:

    【解决方案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

    【讨论】:

      猜你喜欢
      • 2012-10-28
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-04-23
      • 1970-01-01
      • 2015-04-24
      • 2017-06-26
      • 1970-01-01
      相关资源
      最近更新 更多