blocks|key|1413908|text|我刚刚遇到了这个问题，并发现修复方法是在iframe内的页面的HTML标记上设置overflow:+hidden。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1413909|entityMap^0|K|6|14|G|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>I just ran into this problem, and discovered that the fix was to set <code>overflow: hidden</code> on the HTML tag of the page inside the <code>iframe</code>.</p>


blocks|key|1414300|text|您可以隐藏滚动条并保留滚动功能(通过触摸板或滚轮，或在移动电话或平板电脑中触摸和拖动，通过使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1414301|<style>
++iframe::-webkit-scrollbar+{++
++++display:+none;
++}++
</style>|code-block|syntax|javascript|1414302|显然，您可以将iframe更改为适合您的设计的任何内容，并且可以添加等效的-mozilla-属性以使其在firefox中也能工作。|1414303|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You can hide the scrollbars and maintain the scrolling functionality (by touchpad or scroll wheel, or touch and drag in a mobile phone or tablet, by using:</p>

<pre><code>&lt;style&gt;
  iframe::-webkit-scrollbar {  
    display: none;
  }  
&lt;/style&gt;
</code></pre>

<p>Obviously, you can change iframe to whatever fits your design, and you can add the equivalent -mozilla- property to get it work in firefox as well.</p>


blocks|key|1199099|text|Note:+this+is+useful+if+you+cannot+edit+the+CSS+/+HTML+of+the+iFramed+content.|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1199100|这是一个小技巧，但我通过将<iframe>包装在<div>中，设置<div>的高度、宽度和高度，然后设置<iframe>的宽度和高度来实际溢出包装<div>，从而解决了这个问题。|unstyled|offset|length|style|CODE|1199101|<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>|1199102|entityMap^0|0|D|8|O|5|X|5|1G|8|21|5|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|P|8|@$G|Q|H|R|I|J]|$G|S|H|T|I|J]|$G|U|H|V|I|J]|$G|W|H|X|I|J]|$G|Y|H|Z|I|J]]|9|@]|A|$]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$B|C]]|$1|M|3|-4|5|F|7|11|8|@]|9|@]|A|$]]]|N|$]]

<pre><code>Note: this is useful if you cannot edit the CSS / HTML of the iFramed content.
</code></pre>
<p>It's a bit of a hack, but I solved this issue by wrapping the <code>&lt;iframe&gt;</code> in a <code>&lt;div&gt;</code>, setting the <code>&lt;div&gt;</code>'s height, width &amp; <code>overflow:hidden</code>, then setting the <code>&lt;iframe&gt;</code>'s width &amp; height to actually overflow the wrapping <code>&lt;div&gt;</code>.</p>
<pre><code>&lt;style&gt;
  div {height:100px;width:100px;overflow:hidden}
  iframe {height:150px;width:150px;overflow:hidden}
&lt;/style&gt;

&lt;div&gt;
  &lt;iframe src=&quot;foo.html&quot; scrolling=&quot;no&quot;&gt;&lt;/iframe&gt;
&lt;/div&gt;
</code></pre>


blocks|key|1413850|text|我猜你已经尝试过了，但是你在iframe上把滚动设置为no了吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1413851|<iframe+scrolling="no">|code-block|syntax|javascript|1413852|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I'm assuming you've tried this, but have you set scrolling to no on the iframe?</p>

<pre><code>&lt;iframe scrolling="no"&gt;
</code></pre>


blocks|key|1199017|text|为了摆脱灰色的滚动条，在Iframe中显示的页面的主体标签上加上"overflow:+hidden;“，例如<body+style="overflow:hidden;">，这在Chrome8.0.552.215上运行得很好，我也在Iframe上设置了"overflow:+hidden”|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1199018|entityMap^0|1I|V|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>To get rid of the greyed out scroll bars, put "overflow: hidden;" on the body tag of the page being displayed in the Iframe e.g. <code>&lt;body style="overflow:hidden;"&gt;</code> This worked fine for me in Chrome 8.0.552.215 and I also had "overflow: hidden" on the Iframe itself</p>


blocks|key|1414055|text|这有帮助吗？适用于Chrome，IE，FF...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1414056|<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>|code-block|syntax|javascript|1414057|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Does this help? Works on Chrome, IE, FF...</p>

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

&lt;body scroll="no"&gt;
&lt;div id="test"&gt;content&lt;/div&gt;
&lt;/body&gt;
</code></pre>


blocks|key|1413768|text|是否可以将IFRAME的overflow-y+CSS属性设置为visible或hidden|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1413769|entityMap^0|C|A|V|7|13|6|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

<p>Can you set the <code>overflow-y</code> CSS property for the IFRAME to either <code>visible</code> or <code>hidden</code>?</p>


blocks|key|1413959|text|检查卷轴是否真的来自iframe，可能是来自HTML或正文。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1413960|用于在iframe中滚动|1413961|<iframe+scrolling="no">|code-block|syntax|javascript|1413962|在css中|1413963|iframe+{+overflow:hidden;+}

or+

iframe+{+overflow-x:hidden;+overflow-y:hidden}|1413964|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>check if the scroll is realy from the iframe, maybe it's from the HTML or BODY.</p>

<p>For scroll in iframe </p>

<pre><code>&lt;iframe scrolling="no"&gt;
</code></pre>

<p>In css</p>

<pre><code>iframe { overflow:hidden; }

or 

iframe { overflow-x:hidden; overflow-y:hidden}
</code></pre>


blocks|key|1414104|text|我刚刚在我的博客上解决了这个问题，在style标签后加上scrolling="no“。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1414105|例如：|1414106|iframe+src="asdf.html"+style="overflow:+hidden;"+scrolling="no"|code-block|syntax|javascript|1414107|我把style属性留在里面，因为它更合适，而且它在Firefox上工作得很好。|1414108|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I just solved it on my blog with scrolling="no" after the style tag.</p>

<p>eg:</p>

<pre><code>iframe src="asdf.html" style="overflow: hidden;" scrolling="no"
</code></pre>

<p>I left the style attribute in there because it's more proper and it worked fine on Firefox.</p>


blocks|key|1199061|text|在Ubuntu10.10下使用Chrome8.0.552.224测试版仍然在这个网站上显示重影滚动条：http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_iframe_scrolling。我尝试了所有在所有浏览器中都有效的技巧，但不是在基于WebKit的浏览器中。因此，这个bug似乎还没有完全修复。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1199062|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_iframe_scrolling^0|1F|21|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>Using Chrome 8.0.552.224 beta under Ubuntu 10.10 is showing still the ghost scrollbars on this site: <a href="http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_iframe_scrolling" rel="nofollow">http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_iframe_scrolling</a>. I tried all tricks what works in all browsers but not in WebKit based browser. Therefore the bug seems not to be fixed completely.</p>


blocks|key|1414321|text|document.body.addEventListener('touchmove',+function(e){+e.preventDefault();+});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1414322|这是工作，其他似乎没有一个工作，包括e.preventDefault()的touchstart。|unstyled|offset|length|style|CODE|1414323|entityMap^0|0|I|I|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@$G|O|H|P|I|J]]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });
</code></pre>

<p>this works, none of the others seemed to work including the <code>e.preventDefault()</code> for touchstart.</p>


blocks|key|1198657|text|试试这个。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1198658|iframe+{+overflow:hidden;+}|code-block|syntax|javascript|1198659|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try this...</p>

<pre><code>iframe { overflow:hidden; }
</code></pre>


blocks|key|1414038|text|不要在iframe上使用滚动标签，将样式添加为style="overflow-x:hidden;overflow-y:auto;“这将删除水平滚动，反之亦然。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1414039|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Do not use scrolling tag at-all on the iframe and add the style as
style=&quot;overflow-x:hidden;overflow-y:auto;&quot;
this will remove the horizontal scroll and it should work the other way round too.</p>


blocks|key|1198952|text|隐藏在chrome中滚动的iframe+put+body标签如下|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1198953|<body+style="margin:0px;+padding:0px;+overflow:hidden;"></body>|code-block|syntax|javascript|1198954|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>hide iframe scrolling in chrome put body tag like this</p>

<pre><code>&lt;body style="margin:0px; padding:0px; overflow:hidden;"&gt;&lt;/body&gt;
</code></pre>


blocks|key|1414332|text|<iframe>+<body+style="overflow-x:+hidden">+</body>+</iframe>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1414333|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;iframe&gt; &lt;body style="overflow-x: hidden"&gt; &lt;/body&gt; &lt;/iframe&gt;
</code></pre>


blocks|key|1414383|text|1.当您更改iframe的滚动是或否时，iframe的滚动条不会立即显示，您必须刷新iframe。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1414384|2.+iframe中的html点击溢出会影响iframe的滚动条|1414385|3.在IE中，您必须清除iframe的src，然后刷新iframe，它将正常工作|1414386|4.给你看代码|1414387|html|1414388|<iframe+id="main_ifrm"+class="main"++frameborder="0"+scrolling="no"+src="new.html"+></iframe>
<button+id="btn1">scrolling+yes</button>|code-block|syntax|javascript|1414389|1414390|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);
}|1414391|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|Y|8|@]|9|@]|A|$M|N]]|$1|O|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|P|3|Q|5|L|7|10|8|@]|9|@]|A|$M|N]]|$1|R|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|S|$]]

<p>1.when you change iframe's scrolling yes or no, the iframe's scrollbar dosen't show immediately, you must refresh the iframe.</p>

<p>2.the html tap overflow in iframe colud influence the iframe's scrollbar </p>

<p>3.in the IE,you must clear iframe's src,then refresh iframe ,it will be work</p>

<p>4.so, show you the code</p>

<p>html</p>

<pre><code>&lt;iframe id="main_ifrm" class="main"  frameborder="0" scrolling="no" src="new.html" &gt;&lt;/iframe&gt;
&lt;button id="btn1"&gt;scrolling yes&lt;/button&gt;
</code></pre>

<p>javascript</p>

<pre><code>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);
}
</code></pre>


<p>I have an <code>iframe</code> on www.example.com that points to support.example.com (which is a CNAME to a foreign domain).</p>

<p>I automatically resize the height of my iframe so that the frame will not need any scrollbars to display the contained webpage.</p>

<p>On Firefox and IE this works great, there is no scrollbar since I use <code>&lt;iframe ... scrolling="no"&gt;&lt;/iframe&gt;</code>. However, on webkit browsers (Safari and Chrome), the vertical scrollbar persists even when there is sufficient room for the page without the scrollbar (the scrollbar is grayed out).</p>

<p>How do I hide the scrollbar for webkit browsers?</p>


Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar

我在www.example.com上有一个指向support.example.com的iframe (这是一个指向外部域名的CNAME )。我自动调整iframe的高度，这样框架就不需要任何滚动条来显示包含的网页。在火狐和IE上，这个功能非常好用，因为我使用的是<iframe ... scrolling="no"></iframe>，所以没有滚动条。然而，在webkit浏览器(Safari和Chr

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

回答 16

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 16

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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