When trying to update the “overflow: hidden” style attribute of either the body or the html tag using JavaScript, unsurprisingly, IE throws an error… However using the magic of prototype I found a very simple way of achieving this that keeps Microsoft happy – even IE6.

So the two main javascript calls I was trying were:

document.body.style.overflow = 'hidden';
document.body.setStyle({'overflow': 'hidden'});

(The latter using prototype‘s handy setStyle() method) both of which failed. In the end the very simple solution (which I’m posting because I didn’t find written anywhere else) was adding the following css to my global stylesheet

html.overflow-hidden body {
    overflow: hidden;
}

add the following to an IE specific stylesheet

html.overflow-hidden {
    overflow: hidden;
}

that should be included in the section of the page using

<!--[if lte IE 7]>
<style type="text/css" media="screen">
@import url("/css/ie7.css");
</style>
<![endif]-->

and then using the following javascript to toggle the overflow property:

$$('html').invoke('addClassName', 'overflow-hidden');

and

$$('html').invoke('removeClassName', 'overflow-hidden');

So like I said, super simple, but works great!

• Previous Entry: Validate Australian phone numbers in PHP
• Next Entry: ASCII Art Instruction Generator