logo标签列表

Safari/Chrome（Webkit）-无法隐藏iframe垂直滚动条

cssiframesafariwebkitscrollbar
51

我在 www.example.com 上有一个指向 support.example.com 的 iframe（它是一个指向外部域名的 CNAME）。

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

在 Firefox 和 IE 中，这个方法非常好用，因为我使用了 <iframe ... scrolling="no"></iframe>。但是，在 Webkit 浏览器（Safari 和 Chrome）中，即使页面已经足够长而无需滚动条（滚动条被变灰），垂直滚动条仍然存在。

如何在 Webkit 浏览器中隐藏滚动条？

为了后人留存记录：这是Webkit浏览器中的一个错误，现已得到修复。以下是错误报告链接：https://bugs.webkit.org/show_bug.cgi?id=29240 - nerdherd
2
为什么你没有接受任何一个呢？ - Developerium
17个回答
66

我刚遇到了这个问题，发现解决方法是在iframe内部页面的HTML标签上设置overflow: hidden。

4
谢谢你的提示，Tim；它为我解决了这个问题。顺便说一下，似乎在样式标签内将HTML元素设为overflow:hidden是不起作用的——你需要将其放入HTML标签的style属性中（尽管这不是有效的方式）。所以...这样做： <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> - Rudi
在Chrome/10.0.648.133中，无论overflow:hidden是在<html>标签、内联样式甚至外部样式表中，它似乎都能正常工作——尽管Chrome似乎对缓存外部样式表有些过于激进。也许这个bug在多年后的某个时候已经被修复了。 - Kragen Javier Sitaker
如果我将overflow:hidden;添加到body标签而不是html，会有什么区别吗？ - Mori
53

您可以使用以下方法隐藏滚动条并保持滚动功能（通过触摸板或滚轮，或在移动电话或平板电脑上通过触摸和拖动）：

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

显然，你可以将 iframe 改成适合你设计的任何元素，并且你可以添加 -mozilla- 属性使其在 Firefox 中正常工作。

难道没有版主可以将这个设为正确答案吗？ - Hendrik Beenker
@Hendrik，选择正确答案取决于提问者。 - quentin-starin
谢谢@palako。只是一个提醒，如果您想保持垂直滚动条可见，只需使用：iframe :: -webkit-scrollbar：horizontal {display：none;} 来隐藏水平滚动条。 - Joel Azevedo
你可以将错误的答案标记为“不是答案” - 因为它确实不是。 - Ken Sharp
2
这个 CSS 在最新版的 Chrome 中似乎不起作用，你必须在 iframe 本身中进行操作。 - neatcoding
@neatcoding，我这边也无法运行。使用的是Mac上的Chrome 71。 - Mosh Feu
17
Note: this is useful if you cannot edit the CSS / HTML of the iFramed content.

我通过将<iframe>包装在<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>
2
这是一种蛮力方法，应该可以作为解决缺少功能或错误的解决方法 :) - Kragen Javier Sitaker
只需将overflow:hidden添加到iframe样式中，就足以使滚动设置在Safari、Chrome和IE中正常工作。 - nuander
11

我假设你已经尝试过这个，但是你是否在iframe上将滚动设置为no了呢？

<iframe scrolling="no">
是的。不幸的是，我在我的帖子中没有转义那个标志，所以它没有显示出来。 - BrainCore
6
为了消除灰色的滚动条，需要将“overflow: hidden;”添加到在Iframe中显示的页面的body标签上，例如： <body style="overflow:hidden;"> 这在Chrome 8.0.552.215中对我很有效，并且我还在Iframe本身上使用了“overflow: hidden”。
3

这有帮助吗？在Chrome、IE、FF上都可以使用...

<style type="text/css">
html { overflow:hidden; }
#test { position:absolute; top:50; left:50; right:50; bottom:50; height:2000px; }
</style>

<body scroll="no">
<div id="test">content</div>
</body>
2

检查滚动条是否真的来自iframe，可能来自HTML或BODY。

针对iframe中的滚动：

<iframe scrolling="no">

在CSS中：
iframe { overflow:hidden; }

or 

iframe { overflow-x:hidden; overflow-y:hidden}
2
document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });

这个方法可行，其他方法似乎都不起作用，包括使用 e.preventDefault() 来防止 touchstart 事件。

2
我在博客上使用了style标签后，通过添加scrolling="no"属性解决了这个问题。
例如：
iframe src="asdf.html" style="overflow: hidden;" scrolling="no"

我留下了style属性，因为这更加规范，并且在Firefox上运行良好。

2

你能将IFRAME的overflow-y CSS属性设置为visible或hidden吗？

将overflow-y的CSS属性直接设置为IFRAME或包含网页的html/body标签似乎没有任何效果。我可能会以某种方式覆盖此属性吗？ - BrainCore
1
-1 overflow-y 不是标准的 CSS 属性；它只在 IE 中可用。 - Josh Stodola
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接