溢出隐藏不会隐藏 iframe 的滚动条答案

【问题标题】：Overflow hidden doesn't hide scrollbar for iframe溢出隐藏不会隐藏 iframe 的滚动条
【发布时间】：2018-12-17 09:33:32
【问题描述】：

我想隐藏 iframe 上的滚动条，同时在 iframe 中保留滚动功能。我尝试在父级div 和容器上使用overflow:hidden 样式，内联和来自样式表（如this 和this answer 中所建议）但没有效果，因为滚动条仍然存在并提供了可怕的作为页面的用户体验将有两个滚动条。我已经使用 Chrome 和 Firefox 进行了测试，但是这两种浏览器都存在问题。

这就是我所拥有的：

.iframeParent {
  height: 4500px;
  position: relative;
  width: 100%;
}

<div class="iframeParent">
  <iframe class="iframeTag" src="www.example.com" frameborder="0"></iframe>
</div>

scrolling=no 不是一个选项，因为我仍然希望能够在 iframe 内滚动。

是否有可能仅使用 css 来实现这一点，还是我必须求助于 javascript？

【问题讨论】：

你想隐藏 iframe 父级的滚动条还是隐藏 iframe 本身的滚动条？
你试过<iframe ... scrolling="no"> ...吗？
这个双滚动条效果你能不能做一个minimal reproducible example
@misorude 这不是一个选项，因为我希望能够在 iframe 内滚动
@NickParsons 在 iframe 上

标签： html css iframe

【解决方案1】：

这可能是您想要的：视觉上隐藏滚动条但保留滚动功能

.iframeParent {
  width: 200px;
  height: 120px;
  overflow: auto;
}
.iframeParent::-webkit-scrollbar {
  background-color: #fff;
}

.iframeParent iframe {
  width: 650px;
  height: 294px;
}

<div class="iframeParent">
  <iframe class="iframeTag" src="www.example.com" frameborder="0"></iframe>
</div>

【讨论】：