Web Design 101: Customization with a CSS Scrollbar

Web Design 101: Customization with a CSS Scrollbar
Page content

How to implement the CSS scrollbar attribute

An extremely important part of improving the usability of your web pages is ensuring that you only display a scroll bar when absolutely necessary, and that any scrollbar works logically and smoothly. For example, you want to avoid the case where you have multiple nested scrollbars on a single page, that are all controlling the same content. This is a frustrating and confusing experience for your users, and is likely to leave a bad impression.

For any element where you want to customize when and how the CSS scrollbar is displayed, you simply define the CSS overflow attribute. When the content of that element is too large to completely display within the element, then this attribute is applied. Note that the element could be anything from a tag to a

. The default behavior is:

overflow:visible;

This will display the overflowing content outside of your element with no CSS scrollbar, effectively enlarging that element to fit the content. If you would rather hide overflowing content, you can use:

overflow:hidden;

This attribute will hide the content that is outside of your element, but will not display a CSS scrollbar. For example, if you have a div with dimensions of 100x100 pixels, and an image inside that div is 200x200 pixels, this attribute will cause that picture to be cropped down to 100x100 pixels. Alternatively, you can force a CSS scrollbar to be displayed by using:

overflow:scrollbar;

This will crop the content similar to the overflow:hidden; attribute, but it will display a CSS scrollbar to view the excess content. Note that this attribute will display a scrollbar even if the content is not clipped. For the best of both worlds, you can use the attribute:

overflow:auto;

This will cause an element to behave like overflow:scrollbar; by displaying a scrollbar if the content is clipped, but will not display a scrollbar if the content is not clipped.

CSS scrollbar tricks for Internet Explorer

One little known fact is that Internet Explorer has a selection of proprietary CSS scrollbar properties that you can use to change the color and design of the scrollbars on your web pages. Since these attributes are only supported in Internet Explorer, it is not a widely accepted practice to use these CSS scrollbar attributes on your web pages, because the user experience will vary based on the browser. However, they are still fun to know. To use these attributes, you can simply add them to the body class if you want them to apply to the overall browser scrollbar, or to a textarea class if you only want them to display on a specific multi line textbox. These CSS scrollbar attributes all use hex codes for color, and are as follows:

scrollbar-3dlight-color:#ffffff;

scrollbar-arrow-color:#ffffff;

scrollbar-base-color:#ffffff;

scrollbar-darkshadow-color:#ffffff;

scrollbar-face-color:#ffffff;

scrollbar-highlight-color:#ffffff;

scrollbar-shadow-color:#ffffff;

scrollbar-track-color:#ffffff;