无法使用 `overflow:none` 和 `-webkit-scrollbar` 隐藏滚动条

Question

我试图隐藏 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>

这是我的 fiddle:

https://jsfiddle.net/9a7k2dgn/

我可以通过将宽度更改为 90% 来更改它（尽管显然连 100% 都行不通；90% 行但 100% 不行）但是，为了本示例的目的，让我们假设这不是一个选项。而且 none-the-less 我的理解是 overflow: none 无论如何都应该工作。

Answer 1

出现的滚动是iframe内容里面的滚动，不是iframe选择器的滚动条。

要隐藏它，您需要在 iframe 正文样式上实现 overflow: hidden，如下所示。

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

无法使用 `overflow:none` 和 `-webkit-scrollbar` 隐藏滚动条

unable to hide scrollbar with `overflow:none` and `-webkit-scrollbar`

html

css

iframe

overflow

scrollbar