Horizontal scrollbar for iframe with overflow-x content: hidden

Question

I am working on a landing page with a width of 760 pixels, and I need a frame with content (flash demo) with a width of 980 pixels. So I need to have a horizontal scrollbar to view all the content. However, no matter what I add as scroll attributes (for example, scrolling = "auto / yes", etc.), Nothing happens - there is no horizontal scroll bar at all.

The page displayed in the iframe has the following command in the source code:

body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; overflow-x: hidden; } 

As far as I understand, this is the reason that my iframe does not have a horizontal scrollbar. Is there a workaround for this to get one?

Answer 1

You have to wrap the iframe in the containing div , applying a fixed width to the container.

-

HTML

 <div class="container"> <iframe></iframe> </div> 

-

CSS

 .container { width: 980px; height: auto; overflow: scroll; -webkit-overflow-scrolling: touch; } 

Answer 2

Try changing the iFrames (body / child) overflow using javascript.

Sort of:

 window.onload=function(){ document.getElementById(one).setStyles({ 'overflow': 'auto' }); }; 

perhaps this is not sure what the iframes contant body will get:

 window.onload=function(){ var frame = document.getElementById('one'), frameDoc = frame.contentDocument || frame.contentWindow.document; frameDoc.setStyles({ 'overflow': 'auto' }); }; 

Answer 3

Specify width and height in iframe

and add overflow-y:hidden; overflow-x:scroll overflow-y:hidden; overflow-x:scroll in iframe style

 <iframe width="300" height="315" src="http://webstarts.com" frameborder="0" style="overflow-y:hidden; overflow-x:scroll;"></iframe> 

here is the jsFiddle file

Answer 4

After Sergio's answer, here is what I did when I ended up with the same problem using jQuery:

• Take iframe
• Body search
• Apply another overflow property

$('#iframe').contents().find('body').css('overflow', 'auto');

All this, if the page is fully loaded, of course:

$(document).ready(function() {...});

Now it displays scrollbars as I expected

Answer 5

You must use overflow-x: visible. If your content is hosted elsewhere, you won’t be able to change it due to cross-domain issues.

Imagine that you have a website, and someone else wants to create your website and make changes to it (if you can change the overflow, you can literally change any style, which will lead to a huge security leak). That is why you cannot.