Css Trick: Hide Disabled Internet Explorer Vertical Scrollbar

Carsten · April 22, 2005

I'm working on a website and a few minutes ago I got very tired from the Internet Explorer vertical scrollbar. This vertical scrollbar is always there, even if the length of the page does not require a vertical scrollbar. In this case, Internet Explorer will disable the scrollbar though not remove it. In my opinion this would be correct behaviour.

The disabled however not hidden scrollbar means that a switch between a preview of your website in Mozilla Firefox and MS Internet Explorer will lead to an annoying change of the location of your layout. To disable this annoying switch and to hide the vertical scrollbar when the scrollbar is disabled anyway, put the following CSS code in your stylesheet:

html {	overflow: auto;}

If you don't have a stylesheet yet, put this code in your html header:

<style type="text/css">html {	overflow: auto;}</style>

Not much code needed, huh :lol:

beeseven · April 23, 2005

Also, if your site it pushing it (like mine - beeseven.trap17.com - trying viewing it in IE and you get 2 scroll bars), but you know nothing goes offscreen that you need, you can use "overflow: hidden;" and it won't put the scroll bars there even if something goes off (or it thinks something does).

diamond_php · April 23, 2005

That's cool, I don't use internet explorer at all though, it's a terrible browser...This is a nice tutorial, people might find use in it, congradulations Carsten you get a point!!! :lol:

iGuest · October 7, 2007

my website has this code,..you've given but I'm still having no luck,...theres also a concern about hiding images when viewing with IE, does anyone have a good resource.heres my site that I need no scroll bars on the lower (frame, yea I hate frames too)redescape.net/dj_hertz/index.html -dave

iGuest · November 27, 2007

This suggestion is very helpful for those who are developing web application for both IE and Mozila Browser.Thanks Buddy.-Suresh Kumar Pathak

hippiman · December 1, 2007

That's pretty cool. I've been trying to find good tutorials on making stuff work for IE, like the position:fixed; thing, but a lot of them either take a lot of code, or they don't work.I think people should just stop using IE and all go to FF.But I guess I could use that on my pages for all the people that still use IE.

Forbez · December 2, 2007

A preveiw perhaps? And alot of people use Firefox instead of IE, I know I certianly use Firefox.

iGuest · December 10, 2007

When you think that the content doesn't even require a vertical scrollbar you might have used a iframe or a <div> with text in it that will exceed the total length...There just isn't a solution?!?...So you will have to learn to live with a vertical scrollbar. Is that it?I have used the html{overflow:hidden;} 'trick', but this doesn't' work in IE6 or IE7, only Mozilla browsers seem to get rid of the vertical scrollbar. To be sure I have put it in the external CSS and also inline in the <head> of my pages. But whatever I do there always is a vertical scrollbar...Is this just me?-Erick Schluter

iGuest · January 17, 2008

Erick - I was having no luck with html{overflow:auto;} either until I added it to the "body" in css:Html, body {Overflow:auto;}-Keith Bucklen

iGuest · January 25, 2008

Scrollbar goes away, but...

Css Trick: Hide Disabled Internet Explorer Vertical Scrollbar

Scrollbar goes away, but my DIVs go crazy with that CSS option... Is there any other way to remove that damned scrollbar?

-reply by Zorba

iGuest · February 17, 2008

this is the solution

Css Trick: Hide Disabled Internet Explorer Vertical Scrollbar

Replying to Carsten

Overflow-x:hidden

Overflow-y:hidden

It's simple not?

J have a nice day.

-reply by mostafa

iGuest · February 18, 2008

A bit dirty but works ;-)SCROLLBAR-FACE-COLOR: #FFFFFF;SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF;SCROLLBAR-SHADOW-COLOR: #FFFFFF;SCROLLBAR-3DLIGHT-COLOR: #FFFFFF;SCROLLBAR-ARROW-COLOR: #000066;SCROLLBAR-TRACK-COLOR: #FFFFFF;SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF;SCROLLBAR-BASE-COLOR: #FFFFFF;Piglet

iGuest · April 10, 2008

Try using this in the cssOverflow-y:hidden; (vertical scroll bar)Overflow-x:hidden; (hide horizontal scroll bar)-reply by mehreen

iGuest · April 22, 2008

Hide Horizontal Scroll

Css Trick: Hide Disabled Internet Explorer Vertical Scrollbar

Replying to Trap FeedBacker

Thanks buddy I got it, I was finding this command since morning, thanks a lot for help me.

-reply by Faraz

iGuest · April 27, 2008

Sign In

Css Trick: Hide Disabled Internet Explorer Vertical Scrollbar

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information