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 <body> tag to a <div>. The default behavior is:
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:
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:
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:
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.