Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 : Iframe No scrolling?

When it comes to HTML5, scrolling attribute is no longer supported - but I still need to remove the scroll bars - how to do that?

like image 642
jave.web Avatar asked Aug 27 '13 15:08

jave.web


People also ask

How do I make my iframe not scroll?

Just add the scrolling="no" attribute to your iframe.

How do I scroll with an iframe?

To scroll an iframe with JavaScript, we can use the scrollTo method. const myIframe = document. getElementById("iframe"); myIframe. onload = () => { myIframe.

How can I hide scrollbar in iframe but still scroll?

1. Set the overflow of the parent div as hidden. 2. Set the overflow of the child div to auto and the width 200% (or anything more than 100%, or more than the width of the parent - so that the scrollbar gets hidden).


1 Answers

In HTML5 there is no scrolling attribute because "its function is better handled by CSS" see http://www.w3.org/TR/html5-diff/ for other changes. Well and the CSS solution:

CSS solution:

HTML4's scrolling="no" is kind of an alias of the CSS's overflow: hidden, to do so it is important to set size attributes width/height:

iframe.noScrolling{   width: 250px; /*or any other size*/   height: 300px; /*or any other size*/   overflow: hidden; } 

Add this class to your iframe and you're done:

<iframe src="http://www.example.com/" class="noScrolling"></iframe> 

! IMPORTANT NOTE ! : overflow: hidden for <iframe> is not fully supported by all modern browsers yet(even chrome doesn't support it yet) so for now (2013) it's still better to use Transitional version and use scrolling="no" and overflow:hidden at the same time :)

UPDATE 2020: the above is still true, oveflow for iframes is still not supported by all majors

like image 84
jave.web Avatar answered Oct 01 '22 03:10

jave.web