CODEWITHSUNDEEP
javascripthtmllayoutscrollbar
Stephen Watkins
Stephen Watkins

Reputation: 25775

Disable scrollbar

If you go to http://google.com, you will notice that there is a disabled scrollbar.

On my site, to avoid annoying the user with page shifting, I want a scrollbar on every page. But, if the page truly does not need to scroll have the scrollbar disabled.

This seems like a trivial task, but I can't seem to find the solution. Perhaps I'm just missing something.

Anyway, can anyone help with this issue? Thanks.

Upvotes: 2

Views: 9776

Answers (4)

user5229526
user5229526

Reputation: 

 $(" $('body').css('overflow', 'hidden');");

Upvotes: 1

Chase Florell
Chase Florell

Reputation: 47417

the scroll bar is there but disabled depending on what browser you're using. I'm using FireFox on the Mac and there is no scroll bar on the example you provided.

Unfortunately this is one of the annoyances I've come to deal with when developing websites. I'm pretty sure that <body style="overflow:hidden;"> (as others have answered) does not solve the problem. If the page needs a scrollbar, it will add it, but if it doesn't, the browser you use will determine whether or not to show a disabled scroll bar or no scroll bar at all. I haven't found a solution to this problem.

Correction

After reviewing @Stephen P's answer, I think he's on to something. I haven't tested it, but it makes sense.

Upvotes: 3

Stephen P
Stephen P

Reputation: 14810

overflow: auto makes the scrollbar appear when needed and disappear when not. For the scrollbar to always appear, use "scroll"

body {
    overflow-y: scroll;
}

Upvotes: 6

Alex
Alex

Reputation: 66012

There is no way to disable the scrollbar with javascript, but you can set the css overflow property to auto so that when there is overflow, the scrollbar is available, and when there is no overflow, the scrollbar is disabled. Applying this to the body will most likely be the best solution:

body {
    overflow: auto;
}

Upvotes: 3

Related Questions