465 posts
  • Bought between 100 and 499 items
  • Elite Author
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 1 and 9 users
  • Sold between 100 000 and 250 000 dollars
  • United States
CurtyCurt says

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.

155 posts
  • Bought between 10 and 49 items
  • Canada
  • Exclusive Author
  • Has been a member for 4-5 years
Warll says

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

body { height: 100%; overflow: hidden; }

Or are you trying to do something else?

465 posts
  • Bought between 100 and 499 items
  • Elite Author
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 1 and 9 users
  • Sold between 100 000 and 250 000 dollars
  • United States
CurtyCurt says

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

155 posts
  • Bought between 10 and 49 items
  • Canada
  • Exclusive Author
  • Has been a member for 4-5 years
Warll says

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

1025 posts Best-dressed man at PressNomics 2013
  • Attended a Community Meetup
  • Author had a File in an Envato Bundle
  • Bought between 1 and 9 items
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Has attended an Envato Live event
  • Has been a member for 5-6 years
+5 more
Parallelus says
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?

629 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • United States
VagrantRadio says
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");
});
465 posts
  • Bought between 100 and 499 items
  • Elite Author
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 1 and 9 users
  • Sold between 100 000 and 250 000 dollars
  • United States
CurtyCurt says

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.

659 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 50 and 99 users
  • Sold between 10 000 and 50 000 dollars
  • United States
luckykind says

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;

?

629 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • United States
VagrantRadio says
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

by
by
by
by
by
by