Question

我想隐藏iframe上的滚动条，同时保留iframe内的滚动功能。我尝试在父级overflow:hidden和容器`上使用div样式，内联和从样式表中使用样式（如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>

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

1 个答案: