我想隐藏 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?
最佳答案
这可能是您想要的:在视觉上隐藏滚动条但保留滚动功能
.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>
关于html - 溢出隐藏不会隐藏 iframe 的滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53812345/