Question

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

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

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

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

Answer 1

我刚遇到此问题，发现修复是在overflow: hidden内的页面的HTML标记上设置iframe。

Answer 2

您可以隐藏滚动条并保持滚动功能（通过触摸板或滚轮，或通过手机或平板电脑触摸和拖动，使用：

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

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

Answer 3

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

这有点像黑客攻击，但我通过将<iframe>包裹在<div>中来设置<div>的高度，宽度和宽度来解决这个问题。 overflow:hidden，然后设置<iframe>的宽度＆amp;高度实际溢出包裹<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>

希望这有帮助。

Answer 4

我假设您已经尝试过此操作，但您是否在iframe上设置了滚动到否？

<iframe scrolling="no">

Answer 5

要摆脱灰色的滚动条，请输入“overflow：hidden;”在iframe中显示的页面的正文标记上，例如<body style="overflow:hidden;">这对我来说在Chrome 8.0.552.215中运行良好，我在iframe本身也有“溢出：隐藏”

Answer 6

这有帮助吗？适用于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>

Answer 7

document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });

这是有效的，其他任何一个似乎都不起作用，包括e.preventDefault()用于touchstart。

Answer 8

检查滚动是否真的来自iframe，也许是来自HTML或BODY。

用于在iframe中滚动

<iframe scrolling="no">

在css中

iframe { overflow:hidden; }

or 

iframe { overflow-x:hidden; overflow-y:hidden}

Answer 9

我刚刚在我的博客上用样式标记后面的scrolled =“no”解决了这个问题。

例如：

iframe src="asdf.html" style="overflow: hidden;" scrolling="no"

我将style属性留在那里，因为它更合适，并且在Firefox上工作正常。

Answer 10

您可以将IFRAME的overflow-y CSS属性设置为visible或hidden吗？

Answer 11

在Ubuntu 10.10下使用Chrome 8.0.552.224测试版仍显示此网站上的幽灵滚动条：http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_iframe_scrolling。我尝试了所有技巧，但在基于WebKit的浏览器中没有。因此，这个bug似乎没有完全修复。

Answer 12

将iframe的滚动属性设置为“no”应修复此问题，但webkit中似乎存在错误：https://bugs.webkit.org/show_bug.cgi?id=29240

Tim的解决方法（Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar）似乎解决了这个问题 - 只要你就可以编辑iframe所包含的文档...

Answer 13

隐藏iframe在chrome put body标签中滚动

<body style="margin:0px; padding:0px; overflow:hidden;"></body>

Answer 14

不要在iframe上使用滚动标记，并将样式添加为风格= “溢出-X：隐藏;溢出-Y：汽车;” 这将删除水平滚动，它也应该反过来。

-Jai

Answer 15

试试这个......

iframe { overflow:hidden; }

Answer 16

<iframe> <body style="overflow-x: hidden"> </body> </iframe>

Answer 17

1.当您更改iframe的滚动是或否时，iframe的滚动条不会立即显示，您必须刷新iframe。

2. iframe colud中的html tap溢出会影响iframe的滚动条

<> 3.在IE中，你必须清除iframe的src，然后刷新iframe，它会起作用

4.so，显示代码

HTML

<iframe id="main_ifrm" class="main"  frameborder="0" scrolling="no" src="new.html" ></iframe>
<button id="btn1">scrolling yes</button>

的javascript

var ifrm = document.getElementById("main_ifrm");
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
    $(ifrm).prop("scrolling","no");
    $(ifrm.contentWindow.document).find("html").css("overflow","hidden")
    var src = $(ifrm).prop("src");
    $(ifrm).prop("src","");
    $(ifrm).prop("src",src);
}

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

17 个答案: