Styling scrollbars on the web, is a request I often get from designers.
I recently had a task, where I needed some stylish scrollbars. The CSS for styling scrollbars in IE wasn't good enough. So the hunt was on.
A problem frequently met, is centered design jumping in Firefox. Its caused by the browsers default scrollbar behavior. The scrollbar in Firefox is only shown, if its needed.
So in a centered design, if you have a page with no scrolling linking to another page with scrolling, you will see the page jumping. This is caused by the scrollbar appearing and disappearing, making the viewport 18 pixel slimmer.
A way to avoid this, is to show the scrolbar at all times, with this CSS:
html {
overflow-y: scroll;
}
Of course you can reverse this, and have the "scrollbar on demand" feature in IE also:
html {
overflow-y: auto;
}
