Safari/Chrome(Webkit) - 无法隐藏iframe垂直滚动条

Question

Safari/Chrome(Webkit) - 无法隐藏iframe垂直滚动条

Bra*_*ore 49 css safari iframe webkit scrollbar

我iframe在www.example.com上有一个指向support.example.com(它是外国域的CNAME).

我会自动调整iframe的高度,以便框架不需要任何滚动条来显示包含的网页.

在Firefox和IE上这很好用,因为我使用没有滚动条<iframe ... scrolling="no"></iframe>.但是,在webkit浏览器(Safari和Chrome)上,即使没有滚动条的页面有足够的空间(滚动条显示为灰色),垂直滚动条仍然存在.

如何隐藏webkit浏览器的滚动条？

Answer 1

小智 62

我刚遇到这个问题,发现修复是设置overflow: hidden在页面内的HTML标签上iframe.

谢谢你的提示,蒂姆; 它解决了我的问题.顺便说一句,似乎样式化HTML元素溢出:隐藏在样式标记内部不起作用 - 您需要将其作为HTML标记的样式属性(即使这是无效的).所以......这个:<html style ="overflow:hidden;"> <head> </ head> <body> stuff </ body> </ html>不是这个:<html> <head> <style type =" text/css"> html {overflow:hidden; } </ style> </ head> <body> stuff </ body> </ html> (4认同)

Answer 2

pal*_*ako 53

您可以隐藏滚动条并保持滚动功能(通过触摸板或滚轮,或通过使用以下方式在手机或平板电脑中触摸和拖动:

<style>
  iframe::-webkit-scrollbar {  
    display: none;
  }  
</style>

Run Code Online (Sandbox Code Playgroud)

显然,您可以将iframe更改为适合您设计的任何内容,并且您可以添加等效的-mozilla-属性以使其在Firefox中运行.

太棒了,这应该是公认的答案. (5认同)
这就是答案.http://www.webkit.org/blog/363/styling-scrollbars/ (3认同)
这个 CSS 似乎在最新的 Chrome 中不起作用，你必须在 iframe 本身中这样做。 (2认同)

Answer 3

Lab*_*abu 16

Note: this is useful if you cannot edit the CSS / HTML of the iFramed content.

Run Code Online (Sandbox Code Playgroud)

这有点像黑客,但我解决了这个问题,<iframe>包括a <div>,设置<div>的高度,宽度overflow:hidden,然后设置<iframe>的宽度和高度实际上溢出包装<div>.

<style>
  div {height:100px;width:100px;overflow:hidden}
  iframe {height:150px;width:150px;overflow:hidden}
</style>

<div>
  <iframe src="foo.html" scrolling="no"></iframe>
</div>

Run Code Online (Sandbox Code Playgroud)

希望这可以帮助.