Hide scrollbar in iframe, while still scrolling

Question

Is there a way to hide a vertical scrollbar in an iFrame, but with still enabling scrolling?

Only thing that hides the scrollbars in HTML5 for me is setting scrolling="no", but this locks the scrolls. All i want to do is hide them.

 <iframe width="100%" scrolling="no" src=""></iframe>

There is, but it will probably demand JavaScript for a cross-browser experience. This question has some good information: https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll — Cody MacPixelface, Oct 07 '19 at 08:05

score 6 · Accepted Answer · answered Oct 07 '19 at 08:22

scrolling="no"

and

display:none

Will stop the iFrame from scrolling. The only other solution is to "hide" the scrollbar via overlapping.

<div style="width: 400px; overflow: hidden">
  <iframe src="https://fr.wikipedia.org/wiki/Main_Page" width="407"height="480">
</div>

Note the 7 pixel difference between the parent div and the iframe, this effectively cuts off a portion of the iframe so that the scrollbar is hidden but you are still able to scroll.

This seems like the only reasonable solution, thanks a lot! – Filip5991 Oct 07 '19 at 10:21 — Filip5991, Oct 07 '19 at 10:21

score 1 · Answer 2 · answered Aug 02 '22 at 11:56

1

Try this, it will work

<div style='width: 500px; height: 120px; overflow: hidden;'>

    <iframe style='width: 518px; height: 120px;' src=''></iframe>

</div>

answered Aug 02 '22 at 11:56

Chetali Polekar

233
3
9

score -1 · Answer 3 · edited Oct 07 '19 at 08:37

-1

You can achieve this by putting this in your css file: iframe { overflow:hidden; }

edited Oct 07 '19 at 08:37

Constantin Chirila

1,979
2
19
33

answered Oct 07 '19 at 08:15

David

1

This does not remove the scrollbar (at least in Chrome) – Filip5991 Oct 07 '19 at 10:21

Hide scrollbar in iframe, while still scrolling

3 Answers3