How to disable scrollbars with JavaScript?

Question

I need to lock the browser scrollbars when I show a div that represent a modal window in Internet Explorer 7 only. Googling I found that I can use document.body.style.overflow='hidden' but this doesn't work for IE7. I also tried with document.body.scroll="no" which works but only after I mouse over the scrollbar :-S

Does anybody knows a better aproach?

Thansks

Oli · Accepted Answer · 2009-01-07 21:05:57Z

13

To answer your various questions (including that in your other comment), I think you're using the wrong positioning method.

Try position:fixed. It's basically the same as position:absolute apart from it's relative to the absolute viewport. Ie: if the user scrolls, the item stays in the same place on the screen.

So with this in mind, you can lay out a position:fixed overlay. Within that you can have your position:absolute (or fixed again, if you prefer -- it shouldn't make a difference) modal box.

answered Jan 7, 2009 at 21:05

Oli

241k67 gold badges227 silver badges305 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Flupkear Over a year ago

Thanks a lot, that just solved the problem. I thought I know almost all about CSS until now :-P Thanks again.

simianarmy Over a year ago

Thanks I never would have figured this out! You saved my ass.

Omar Abid Over a year ago

I knew the difference, but I didn't knew when to use each one, until your answer. Thanks.

dthrasher Over a year ago

Note that "position:fixed" is one of the CSS2 properties that causes trouble in IE6. So this solution will not work if you have to support IE6 in addition to IE7.

Joel Coehoorn · Accepted Answer · 2009-01-07 20:55:19Z

2

Set your modal overlay div to fill the body, so even if they scroll there's nothing they can do because everything is hidden underneath it.

answered Jan 7, 2009 at 20:55

Joel Coehoorn

419k114 gold badges582 silver badges820 bronze badges

3 Comments

Flupkear Over a year ago

how do you get the size of the viewport in IE7? I can't get the real size of the body with any of these: window.innerHeight, document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.body.clientHeight The page has a size of around 2000 pixels

Kevin Tighe Over a year ago

If you use jquery you can just do $("body").width() and $("body").height() to get the body width and height in a cross browser compatible way.

Flupkear Over a year ago

The application I'm working on uses Prototype, I couldn't find a way with Prototype to get the real height. Height 100% doesn't work either. I fixed it with position:fixed

biegleux · Accepted Answer · 2012-08-30 17:20:20Z

0

you can also hide scrollbars by using overflow:hidden so the user wont see the scollbars so it wont get tempted to scoll around:)

edited Aug 30, 2012 at 17:20

biegleux

13.3k11 gold badges47 silver badges52 bronze badges

answered Jan 7, 2009 at 21:55

Quamis

11.2k13 gold badges54 silver badges67 bronze badges

Comments

Pang · Accepted Answer · 2017-02-13 06:02:49Z

This can help you:

documentOBJ = {
    /*Width and Height of the avaible viewport, what you'r seeing*/
    window : {
        x : function(){return (document.documentElement && document.documentElement.clientWidth) || window.innerWidth || self.innerWidth || document.body.clientWidth; },
        y : function(){return (document.documentElement && document.documentElement.clientHeight) || window.innerHeight || self.innerHeight || document.body.clientHeight;}
    },

    /*Scroll offset*/ 
    scroll : {
        x : function(){return ( document.documentElement && document.documentElement.scrollLeft) || window.pageXOffset || self.pageXOffset || document.body.scrollLeft; },
        y : function(){return ( document.documentElement && document.documentElement.scrollTop) || window.pageYOffset || self.pageYOffset || document.body.scrollTop; }
    },

    /*Height and width of the total of the xhtml in a page*/
    page : {
        x : function(){return (document.documentElement && document.documentElement.scrollWidth) ? document.documentElement.scrollWidth : (document.body.scrollWidth > document.body.offsetWidth) ? document.body.scrollWidth : document.body.offsetWidth; },
        y : function(){return (document.documentElement && document.documentElement.scrollHeight) ? document.documentElement.scrollHeight : (document.body.scrollHeight > document.body.offsetHeight) ? document.body.scrollHeight : document.body.offsetHeight; }
    },
    pointer : {}
}

Collectives™ on Stack Overflow

How to disable scrollbars with JavaScript?

4 Answers 4

4 Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related