Loading...


bookmark - Css Trick: Hide Disabled Internet Explorer Vertical Scrollbar

Css Trick: Hide Disabled Internet Explorer Vertical Scrollbar

 
 Discussion by Carsten with 37 Replies.
 Last Update: June 22, 2011, 12:43 am ( View Rated (26) ) (View Latest)
Page 1 of 2 pages.
bookmark - Css Trick: Hide Disabled Internet Explorer Vertical Scrollbar  
Quickly Post to Css Trick: Hide Disabled Internet Explorer Vertical Scrollbar w/o signup Share Info about Css Trick: Hide Disabled Internet Explorer Vertical Scrollbar using Facebook, Twitter etc. email your friend about Css Trick: Hide Disabled Internet Explorer Vertical Scrollbar Print
Reply / Comment New Discussion / Topic Share / Bookmark E-Mail a Friend Print


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:

CODE

html {
overflow: auto;
}
If you don't have a stylesheet yet, put this code in your html header:

CODE

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


Not much code needed, huh :lol:

   Fri Apr 22, 2005    Reply         

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).

   Fri Apr 22, 2005    Reply         

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:

   Fri Apr 22, 2005    Reply         


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

   Sun Oct 7, 2007    Reply         

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

-Suresh Kumar Pathak

   Mon Nov 26, 2007    Reply         

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.

   Sat Dec 1, 2007    Reply         


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

   Sun Dec 2, 2007    Reply         

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






   Mon Dec 10, 2007    Reply         

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

   Thu Jan 17, 2008    Reply         

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

   Fri Jan 25, 2008    Reply         

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

   Sat Feb 16, 2008    Reply         

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

   Sun Feb 17, 2008    Reply         

Try using this in the css
Overflow-y:hidden; (vertical scroll bar)
Overflow-x:hidden; (hide horizontal scroll bar)

-reply by mehreen

   Thu Apr 10, 2008    Reply         

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

   Tue Apr 22, 2008    Reply         

works for me
Css Trick: Hide Disabled Internet Explorer Vertical Scrollbar

Overflow-y:hidden; (vertical scroll bar)
Overflow-x:hidden; (hide horizontal scroll bar)

^^ this worked perfectly for me.

-reply by tikistar

   Sat Apr 26, 2008    Reply         

NIce Suggestion
Css Trick: Hide Disabled Internet Explorer Vertical Scrollbar

This suggestion is very helpful for those who are developing web application for both IE and Mozila Browser.

-reply by Sam Galope

   Wed May 28, 2008    Reply         

Brilliant.
I had never thoughtto try that, but now i know you can, i must use it!!

nice thread!

   Thu Jun 26, 2008    Reply         

Wow, nice one, I didnt even know that was possible ;).
GJ

   Thu Jun 26, 2008    Reply         

it's like this


* html body{
overflow:hidden;
}


also with y or x... it's very cool ;) mostly when you have iframe content...

   Thu Jun 26, 2008    Reply         

Vertical Scroll Bar only within MSIE 7.0
Css Trick: Hide Disabled Internet Explorer Vertical Scrollbar

I am having a problem with the vertical scroll bar showing up within MSIE 7.0
(under Windows XP) on the default page of my website //rjdvorak.Net.
This does not happen with any other MS browser or any other browser (demonstrated by //browsershots.Org). I thought the directive
"overflow: auto" specified for the particular <div> would correct the problem.

Does anyone know how to solve this problem?

-question by are Dvorak

   Tue Nov 18, 2008    Reply         

IE may suck but they do get things right!Css Trick: Hide Disabled Internet Explorer Vertical Scrollbar
I'm a Firefox person myself but I must say that IE does occasionally get things right.
 
For EVERY DAY BROWSING having a grayed out scroll bar is a better solution than no scroll bar.
 
-I've had people testing websites ask me why the layout keeps jumping around from page to page. What their really seeing is the shift cause by having a scroll bar on longer pages... And no scroll bar on shorter pages. (People always feel stupid when you tell them it is due to the scroll bar...)
 
-In IE your layout never shifts. Which means if you switch from a short page to a long page the navigation stays in precisely the same location. (Most good site designs have large enough navigation to make this small shift irrelevant, but not all.)
 
I have a laundry list of reasons to hate IE, but I think this is one of the things they did right!
 
-reply by Matt Rohland

   Thu Nov 20, 2008    Reply         

i want the oppositeCss Trick: Hide Disabled Internet Explorer Vertical Scrollbar

Id like to do the opposite.I have a site with flowing width (resizes according to browser area... I use percentages).

When viewed in firefox, it looks grea, but some pages of the are too short for a scrollbar, therefore some pages of the site have a scrollbar, others don't, that results into the design sometimes moving a few  pixels when browsing from a page to pag...This made me understand the logic between the IE decision to keep the scrollbar but disable it...

Now the funny thing is that I'm trying to do the opposite, I want the scrollbar to appear in firefox even on pages that don't require a scrollbar, so that the design stays uniform across all pages.

[img]/txtmngr/images/smileys/smiley1.Gif[/img]

Any way to do that?

   Sun Jan 11, 2009    Reply         

For IE6 and IE7 you can give like this

* html body{ overflow:hidden; }

# html body{ overflow:hidden; }

Regards,

Vijay vinoth

   Tue May 5, 2009    Reply         

ooh. Never knew that. Although I barely use ie, some people are going to find this useful

   Thu May 21, 2009    Reply         

Very simple code, yet a lot of people don't use it, I mean a lot of people want/need a scrollbar, but I'm thinking about using this code for my next website, even though you can find this pretty much anywhere, it's still nice to have it posted here.

   Wed May 27, 2009    Reply         

very nice and useful didnt know that too lol.

thanks a lot for sharing it!

   Thu May 28, 2009    Reply         

Css Trick: Hide Disabled Internet Explorer Vertical ScrollbarCss Trick: Hide Disabled Internet Explorer Vertical Scrollbar

Seems to me iGuest that you would need to use "scroll" instead of "auto".

Give that a try.

-reply by thorongil

   Fri Jun 19, 2009    Reply         

Scroll barCss Trick: Hide Disabled Internet Explorer Vertical Scrollbar

I have also try this : "This vertical scrollbar is always there, even if the length of the page does not require a vertical scrollbar."

Is it the problem of web server? And how can be fixed?

Thank you

 -reply by Man Yan

   Thu Jul 9, 2009    Reply         

This is really good info. I've been trying to find a way to have all browsers have the vertical scroll bar showing all the time so that the shorter pages don't shift as you go from page to page, because of the scroll bar coming in and out. I keep forgetting to try targeting the html when I want to effect something with css. Making the html have an overflow: hidden and then the body have overflow: scroll makes that happen. The default IE scroll bar was always causing problems.

   Mon Jun 29, 2009    Reply         

Stopped my scrollingCss Trick: Hide Disabled Internet Explorer Vertical Scrollbar

thorongil you are a star. I have been trying to stop my pages from shifting left because of the scroll bar and you have fixed it for me. It works beautifully in FF and IE with- html {overflow: scroll;}in the css. Thanks a million.

-reply by BayTheMoon

   Tue Aug 18, 2009    Reply         

Quickly Post to Css Trick: Hide Disabled Internet Explorer Vertical Scrollbar w/o signup Share Info about Css Trick: Hide Disabled Internet Explorer Vertical Scrollbar using Facebook, Twitter etc. email your friend about Css Trick: Hide Disabled Internet Explorer Vertical Scrollbar Print
Reply / Comment New Discussion / Topic Share / Bookmark E-Mail a Friend Print


Similar Topics:

Speed Up Your Internet Explorer Fas...

This is s little tip that you can make your Internet Explorer browser can run fast as Firefox browser. You can make it by following the step by step below step 1: first you go to start menu and then choose run. step2: After you choose run,it appears a little box,then ...more

   11-Jul-2006    Reply         

How To Complete Remove Internet Exp...

I want to completely remove default internet explorer on windows XP operating system. for this what i do ? actually i installed new version of internet explorer in my operating system and when i open that IE from this old version automatically open in my desktop. i aso install mozila fir ...more

   07-Jan-2009    Reply         

Internet Explorer 8 Offers Improved...

**cough** fangirl **cough** excuse me I had to clear my throat for second. Besides the obvious fact this girl got paid to write this article in favor of Internet Explorer 8, it would seem that there might be some valid points why Internet Explorer 8 will be great. Not lets be reasonable here, is i ...more

   11-Feb-2009    Reply         

I Need A Tut!    I Need A Tut! (15) (1) Saint Michael Css2 Tips And Tricks Issue #1 css tips and tricks for you beginners and experts  Saint Michael Css2 Tips And Tricks Issue #1 css tips and tricks for you beginners and experts