Search code examples
htmlcssiframescroll

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>

Solution

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