htmlcssiframe

HTML iframe - disable scroll


I have following iframe in my site:

<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no" style="overflow: hidden"></iframe>

And it has scrolling bars.
How to get rid of them?


Solution

  • Unfortunately I do not believe it's possible in fully-conforming HTML5 with just HTML and CSS properties. Fortunately however, most browsers do still support the scrolling property (which was removed from the HTML5 specification).

    overflow isn't a solution for HTML5 as the only modern browser which wrongly supports this is Firefox.

    A current solution would be to combine the two:

    <iframe src="" scrolling="no"></iframe>
    
    iframe {
      overflow: hidden;
    }
    

    But this could be rendered obsolete as browsers update. You may want to check this for a JavaScript solution: http://www.christersvensson.com/html-tool/iframe.htm

    Edit: I've checked and scrolling="no" will work in IE10, Chrome 25 and Opera 12.12.