Horizontal scroll bar for iframe with content that has overflow-x: hidden

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 (e.g. 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' });
};