Hide IFRAME scrollbars with javascript

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 scrol开发者_如何学运维lbars 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?

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

overflow: hidden;

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.

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.