Controlling browser scrollbars

In Firefox, the vertical scrollbar only shows when the page contents do not go beyond the height of the browser window (i.e. you just have a simple 'Hello World' or very little content on your page). On the other hand, the scrollbar always shows if you are using Internet Explorer. For consistency across these (and possibly other browsers as well), you can apply a little bit of CSS.

To make IE behave like Firefox (only show scrollbar when needed), just do this:

html {
   overflow-y: auto;
}

To always show the scrollbar (to prevent the layout changing when more content-rich pages are loaded on your site):

html {
   overflow-y: scroll;
}

I also use the same trick to only show scrollbars in <textarea>'s when needed:

textarea {
    overflow: auto;
}

Comments

This code doesn't seem to work,and the scroll bars are showing in Firefox, not IE. IE does just fine. Any suggestions?

Popular posts from this blog

Select box manipulation with jQuery

iTextSharp: Generating a Basic PDF file (ASP.NET/C#)

Popup Window Countdown (JavaScript)