Saturday, December 15, 2007

How to Force the Right Scroll Bar in Both Firefox And IE

I have seen many different attempts at forcing the right scroll bar. It has been something that I have casually been searching for a solution for some time now.

The issue that is resolved with a forced scroll bar deals with the page adjustment that is made when you navigate between a short page and a long page in a centered page design. The short page is smaller than the browser window and thus doesn't require a scroll bar. The long page, being longer, automatically gets the scroll bar so that the width of the window is shorter and thus the centered page design shifts slightly to the left.

Many of these techniques set some aspect of the page height greater than the actual page height. The issue there is that it is unclean and creates scrap page space.

Another technique uses JavaScript. I generally avoid adding JavaScript unless absolutely necessary for the functionality that I am aiming for.

The solution that I recently came across is as follows and works nicely in both Internet Explorer and Firefox:

html { overflow-y: scroll; }
html { overflow: -moz-scrollbars-vertical; }

No comments: