带有溢出-x 内容的 iframe 的水平滚动条：隐藏

Question

I am working on a landing page with width 760px and need to have an iframe with content (a flash demo) that is 980px wide. So I would need to have a horizontal scrollbar in order to view the entire content. However, no matter what I add as scrolling attributes (eg scrolling="auto/yes" etc), nothing happens - no horizontal scrollbar 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 it, this is the reason why there is no horizontal scrollbar in my iframe. Is there any workaround for that to get one?

Answer 1

You should wrap the iframe in a containing div , applying the 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 with javascript.

Something like:

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

maybe this, not sure which will get the body of the iframes contant:

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

Answer 3

Mention the width and height in to the iframe

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

<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

Following Sergio's answer here is what I did when I found myself with the same problem, using jQuery:

• Take the iframe
• Search for the body
• Apply a different overflow property

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

All this once the page has been completely loaded, of course:

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

Now it displays the scrollbars as I expected

Answer 5

You should use overflow-x: visible. If your content is hosted elsewhere you will not be able to change due to cross domain issues.

Imagine if you own a website and someone else wants to iFrame your website and make changes to it ( if you could change the overflow, you could literally change any styling and that would be a huge security leak ). That is the reason why you can't.

Answer 6

In your CSS-rule for "body", no "width" is specified. If I understand it correctly if there is no width then such content can not overflow anything horizontally. It can not be "wider" than anything because it has no "width", so it can not overflow it either.

So I would try giving a width-attribute to the body of the document displayed inside the iFrame.

Naturally this might work in some browsers but not in others.