Overflow hidden doesn't hide scrollbar for iframe

Question

I want to hide the scrollbar on an iframe while retaining the scrolling functionality within an iframe. I've tried using overflow:hidden styling on the parent div and the container`, inline and from a stylesheet (as suggested in this and this answer) but to no effect, as the scrollbar remains and provides a horrible user experience as the page then will have two scrollbars. I have tested using both Chrome and Firefox, but the issue is present in both browsers.

This is what I have:

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

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

And scrolling=no is not an option as I still want to be able to scroll within the iframe.

Is it even possible to achieve this using only css or do I have to turn to javascript?

Do you want to hide the scrollbar on just the parent of the iframe or do you want to hide the scrollbar on the iframe itself? — Nick Parsons, Dec 17 '18 at 09:36
@misorude that's not an option as I want to be able to scroll within the iframe — bork, Dec 17 '18 at 10:13

score 2 · Answer 1 · answered Dec 17 '18 at 10:11

This might be what you want: visually hiding the scrollbar but scrolling functionality is retained

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

Overflow hidden doesn't hide scrollbar for iframe

1 Answers1