Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide scrollbar in iframe, while still scrolling

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>
like image 576
Filip5991 Avatar asked Oct 19 '25 00:10

Filip5991


2 Answers

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.

like image 73
msbarnard Avatar answered Oct 21 '25 00:10

msbarnard


Try this, it will work

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

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

</div>
like image 32
Chetali Polekar Avatar answered Oct 21 '25 00:10

Chetali Polekar



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!