blocks|key|354766|text|我用这个css解决了同样的问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|354767|++++pointer-events:none;|code-block|syntax|javascript|354768|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 solved the same issue with this css:</p>

<pre><code>    pointer-events:none;
</code></pre>


blocks|key|354909|text|将所有内容设置为：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|354910|#yourContent{
+width:100%25;
height:100%25;++//+in+you+csss
}|code-block|syntax|javascript|354911|问题是iframe滚动是由内容设置的，而不是由iframe本身设置的。|354912|在内部使用CSS将内容设置为100%25，在HTML中将iframe设置为所需的内容|354913|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Set all the content to:</p>

<pre><code>#yourContent{
 width:100%;
height:100%;  // in you csss
}
</code></pre>

<p>The thing is that the iframe scroll is set by the content NOT by the iframe by itself.</p>

<p>set the content to 100% in the interior with CSS and the desired for the iframe in HTML</p>


blocks|key|137108|text|我在我当前的浏览器(Google+Chrome版本60.0.3112.113+(官方版本)(64位))中尝试了scrolling="no“，但没有起作用。然而，scroll="no“确实起作用了。也许值得一试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|137109|<iframe+src="<<URL>>"+height="800"+width="800"+sandbox="allow-same-origin+allow-scripts+allow-forms"+scroll="no"+style="overflow:+hidden"></iframe>|code-block|syntax|javascript|137110|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 tried scrolling="no" in my current browser (Google Chrome Version 60.0.3112.113 (Official Build) (64-bit)) and that didn't work.  However, scroll="no" did work.  Might be worth trying</p>

<pre><code>&lt;iframe src="&lt;&lt;URL&gt;&gt;" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scroll="no" style="overflow: hidden"&gt;&lt;/iframe&gt;
</code></pre>


blocks|key|355071|text|这对我来说很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|355072|<style>
*{overflow:hidden!important;}
html{overflow:scroll!important;}
</style>|code-block|syntax|javascript|355073|注意:如果在任何其他元素中需要滚动条，还要将css+{overflow:scroll!important;}添加到该元素中。|offset|length|style|CODE|355074|entityMap^0|0|0|Q|S|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>This works for me:</p>
<pre><code>&lt;style&gt;
*{overflow:hidden!important;}
html{overflow:scroll!important;}
&lt;/style&gt;
</code></pre>
<p>Note: if you need scrollbar in any other element, also add css <code>{overflow:scroll!important;}</code> to that element</p>


blocks|key|136926|text|添加此styles..for您的iframe标签..|type|unstyled|depth|inlineStyleRanges|entityRanges|data|136927|overflow-x:hidden;
overflow-y:hidden;|code-block|syntax|javascript|136928|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>Add this styles..for your iframe tag..    </p>

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


blocks|key|137146|text|只需添加一个iframe样式，如下面的任一选项。我希望这能解决这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|137147|第一个选项：|137148|<iframe+src="https://www.skyhub.ca/featured-listing"+style="position:+absolute;+visibility:+hidden;"+onload="this.style.position='static';+this.style.visibility='visible';"+scrolling="no"+frameborder="0"+marginheight="0px"+marginwidth="0px"+height="400px"+width="1200px"+allowfullscreen></iframe>|code-block|syntax|javascript|137149|第二个选项：|137150|<iframe+src="https://www.skyhub.ca/featured-listing"+style="display:+none;"+onload="this.style.display='block';"+scrolling="no"+frameborder="0"+marginheight="0px"+marginwidth="0px"+height="400px"+width="1200px"+allowfullscreen></iframe>|137151|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>Just add an iframe styled like either option below. I hope this solves the problem.</p>

<p>1st option:</p>

<pre><code>&lt;iframe src="https://www.skyhub.ca/featured-listing" style="position: absolute; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="400px" width="1200px" allowfullscreen&gt;&lt;/iframe&gt;
</code></pre>

<p>2nd option:</p>

<pre><code>&lt;iframe src="https://www.skyhub.ca/featured-listing" style="display: none;" onload="this.style.display='block';" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="400px" width="1200px" allowfullscreen&gt;&lt;/iframe&gt;
</code></pre>


blocks|key|137004|text|对于此帧：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|137005|++++<iframe+src=""+name=""+id=""></iframe>|code-block|syntax|javascript|137006|我在我的css代码上尝试了一下：|137007|++++iframe#put+the+value+of+id+here::-webkit-scrollbar+{
+++++++++display:+none;
++++}|137008|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>For this frame: </p>

<pre><code>    &lt;iframe src="" name="" id=""&gt;&lt;/iframe&gt;
</code></pre>

<p>I tried this on my css code:</p>

<pre><code>    iframe#put the value of id here::-webkit-scrollbar {
         display: none;
    }
</code></pre>


blocks|key|354802|text|您可以使用以下CSS代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|354803|margin-top:+-145px;+
margin-left:+-80px;
margin-bottom:+-650px;|code-block|syntax|javascript|354804|以限制iframe的视图。|354805|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 use the following CSS code: </p>

<pre><code>margin-top: -145px; 
margin-left: -80px;
margin-bottom: -650px;
</code></pre>

<p>In order to limit the view of the iframe.</p>


<p>I have following iframe in my site:</p>

<pre><code>&lt;iframe src="&lt;&lt;URL&gt;&gt;" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no" style="overflow: hidden"&gt;&lt;/iframe&gt;
</code></pre>

<p>And it has scrolling bars.<br>
How to get rid of them?</p>


HTML iframe - disable scroll

我在我的网站上有以下iframe：<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no" style="overflow: hidden"></iframe>而且它还有滚动条。如何摆脱它们？

问HTML iframe -禁用滚动
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML iframe -禁用滚动EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML iframe -禁用滚动
EN