html - 溢出隐藏不会隐藏 iframe 的滚动条

Question

我想隐藏 iframe 上的滚动条，同时保留 iframe 中的滚动功能。我已经尝试在父 div 和 container` 上使用 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？

Answer 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>