Friday, May 25, 2007

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;
}

1 comment:

Srihari Yamanoor said...

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