Hide IFRAME scrollbars with javascript

Question

I have a jQuery project where I open an iframe with scrollbars (scrolling=auto) in an overlay (boxy plugin) popup with an animation. When the overlay is closed I want the popup to tween and fade-out. So far so good, but while the size of the iframe is decreasing, the scrollbars suddenly appear before the whole thing disappears.

I tried manipulating the iframes scrolling attribute but that doesn't seem to exist on the iframes' DOM object at that point. Can anyone help?

Answer 1

No need for JavaScript. Just use the following CSS on the iframe:

overflow: hidden;

Answer 2

IIRC, the scrollbars belong to the framed page, and have to be disabled there. If your iframes are cross-domain, this may not be possible.

Answer 3

Frameless iframe with no scrollbars:

 var el = document.createElement("iframe");
 var iframe_style = "overflow:hidden; margin:0;padding:0;"
 var ifattr = {
        id: 'my_iframe', width: '520', height: '300', 'scrolling': 'no', 'marginWidth':0,
        'marginHeight':0, 'noResize': 0, 'border': 0, 'frameBorder':0, 'frameSpacing':0,
        'background': 'transparent','allowTransparency': 'allowTransparency',
        'name' :'my_iframe','style':iframe_style};

 for (var i in ifattr) {
      el.setAttribute(i, ifattr[i]);
 }

This is pure JS, can be easily ported to jQuery with use of attr(), tested in IE6-8, FF.

Document inside should use: body {overflow: hidden;} - not tested if it's really required.