Html 无法隐藏带有“溢出：无”和“-webkit scrollbar”的滚动条`_Html_Css_Iframe_Scrollbar_Overflow

Html 无法隐藏带有“溢出：无”和“-webkit scrollbar”的滚动条`

html css iframe

Html 无法隐藏带有“溢出：无”和“-webkit scrollbar”的滚动条`,html,css,iframe,scrollbar,overflow,Html,Css,Iframe,Scrollbar,Overflow,我试图隐藏iframe的滚动条，但它不起作用。这是我的HTML： <style> .no-scrollbar::-webkit-scrollbar { display: none } .no-scrollbar { overflow: none } </style> <iframe class="no-scrollbar" id="iframe">zzz</iframe> <script

我试图隐藏iframe的滚动条，但它不起作用。这是我的HTML：

<style>
.no-scrollbar::-webkit-scrollbar {
  display: none
}

.no-scrollbar {
  overflow: none
}
</style>

<iframe class="no-scrollbar" id="iframe">zzz</iframe>

<script type="text/javascript">
   var doc = document.getElementById('iframe').contentWindow.document;
   doc.open();
   doc.write('<body style="width: 110%">zzz</body>');
   doc.close();
</script>


.no滚动条：-webkit滚动条{
显示：无
}
.没有滚动条{
溢出：无
}
zzz
var doc=document.getElementById（'iframe'）.contentWindow.document；
doc.open（）；
书面文件（“zzz”）；
doc.close（）；

这是我的小提琴：

我可以通过将宽度更改为90%来改变它（虽然显然不是100%有效；90%有效，但不是100%），但是在本例中，我们假设这不是一个选项。尽管如此，我的理解是，

overflow:none

无论如何都不能工作。

出现的滚动条是

iframe

内容中的滚动条，而不是

iframe

选择器的滚动条

要隐藏它，您需要在

iframe

主体样式上实现

overflow:hidden

，如下所示

doc.write('<body style="width: 110%; overflow: hidden;">zzz</body>');

doc.write（'zzz'）；