【问题标题】:how remove horizontal scroll bar for iframe on google chrome如何在谷歌浏览器上删除 iframe 的水平滚动条
【发布时间】:2013-09-09 23:44:03
【问题描述】:

我想要启用垂直滚动和关闭水平滚动。

使用 scrolling="no" 不是我想要的,因为我仍然想要垂直滚动。

我已经尝试将它添加到 css 中

  #myiframe{
    overflow-x:hidden;
    overflow-y:auto;
  }

但它仍然只显示 chrome 的水平滚动条。其他浏览器都很好。

感谢任何帮助

【问题讨论】:

  • 您是否有权访问 iframe 源或至少是来自同一域的页面?
  • 我愿意。但使用 overflow-x:hidden 仅适用于 chrome。它适用于所有其他浏览器。
  • 实际上,如果您将样式body {overflow-x:hidden;}(甚至html {overflow-x:hidden;})放入显示inside of iframe的页面 - 它也适用于Chrome

标签: html css iframe


【解决方案1】:

如果您可以访问 iframe 源页面,则可以放置

body {
    overflow-x:hidden;
}

该页面的内部。如果你不这样做,但至少页面来自同一个域,我相信来自父页面的类似这样的东西应该可以工作:

#myiframe body {
    overflow-x:hidden;
}

如果以上都不是真的 - 您可以通过实际隐藏 iframe 容器内的水平滚动条来模拟“溢出-x:隐藏”。将 iframe 放入高度较低的容器 DIV 中,例如:

<div id="myiframecontainer">
    <iframe id="myiframe" src="http://en.wikipedia.org"  />
</div>

#myiframecontainer {
    width:600px;
    height:400px;
    overflow:hidden; 
}

#myiframe {
    width:100%;
    height:420px; 
}

由于 iframe 的高度大于 div 的高度并且 div 的溢出设置为隐藏 - iframe 的水平滚动条将被隐藏。垂直仍然可以运行。

演示:http://jsfiddle.net/5DPgf/

【讨论】:

  • 谢谢!这似乎是一个尚未修复的谷歌浏览器问题。但是您将其放置到高度较低的 div 的解决方案是临时解决方案。
  • 选项 3 正是我所需要的。好想!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-03-27
  • 1970-01-01
  • 2018-03-23
  • 1970-01-01
  • 2015-04-06
相关资源
最近更新 更多