question for you html rockstars

I am trying to disable scolling on a page after it has already loaded

IE this works fine

document.body.scroll = "no";

and this works for firefox

document.body.style.overflow = "hidden";

however when I set the overflow on the body after the page has already loaded, in firefox, the entire page actually reloads. Anyone know how to get around this.

How about you add this using javascript once the dom is ready?

Or are you trying to do something else?

nope, the page has already totally rendered, and I want to set a button click to disable the scroll bars, but for some reason when I make a call to javascript to do this,

document.body.style.overflow = "hidden";

the whole page re-renders

How you tried it the manual way, ie write your own simple function to give body the proper css rules?

nope, the page has already totally rendered, and I want to set a button click to disable the scroll bars, but for some reason when I make a call to javascript to do this,

document.body.style.overflow = "hidden";

the whole page re-renders

Are you sure the button doesn’t have a target? What I mean is something like a link tag with an empty HREF value, or a submit button on a form that posts back to the same page?

<a href="" onclick="document.body.style.overflow='hidden';">
    Remove Scrollbars
</a>

That would reload the page. But using a true button (or adding “return false;” after the onclick command) will only execute the javascript and nothing else:

<!-- using a link -->
<a href="#" onclick="document.body.style.overflow='hidden'; return false;">
    Remove Scrollbars
</a>

<!-- using a button -->
<button onclick="document.body.style.overflow='hidden';">
    Remove Scrollbars
</button>

Can you post the full code for the button you are creating?

I am trying to disable scolling on a page after it has already loaded

IE this works fine

document.body.scroll = "no";

and this works for firefox

document.body.style.overflow = "hidden";

however when I set the overflow on the body after the page has already loaded, in firefox, the entire page actually reloads. Anyone know how to get around this.

Using jQuery would be much simpler.

$("#button").click(function() {
$("body").css("overflow", "hidden");
}, function() {
$("body").css("overflow", "auto");
});

Thanks for the post guys. Actually this is a flash button that when clicked uses External Inteface to call javascript, and that javascript function disables the scrollbar, but for some reason when javascript changes the overflow property on any element it actually refreshes the page like an empty a-tag. I am baffled by this. I tried it with the jquery way as well and it has the same effect.

It’s hard to tell without seeing code… but with whatever your clicking (eg. anchor tag, button tag, etc.) are you also adding after it:

?

It’s hard to tell without seeing code… but with whatever your clicking (eg. anchor tag, button tag, etc.) are you also adding after it: return false; ?

+1