How to customize your scrollbars

The scrollbar is a graphic element that you can customize through CSS code, like any other object in the pages of a site. Let's see, in detail, the changes more frequently used.

How to enable the scrollbars

In a web page is often necessary to see a very long text without gum up the graphic structure of the page.
The optimal solution in these cases is the inclusion of the scrollbars in order to make the text viewable by users with the scrolling through them.
The CSS property used to show the scrollbars is overflow, which has the following values:

• hidden: the text in excess compared to the size of the text box will be cut

• visible: the text in excess will be forced to be displayed

• auto: if the text exceeds the limits, horizontally or vertically, te browser will insert the corresponding scrollbar

• scroll: scrollbar will appear in every case
  

In the following example, divs of class code use the scrollbars when the text exceeds the 300px, in height or in width.

div.code {
	overflow: auto;
	width: 300px;
	height: 300px;
	padding: 5px;
}

The above code is not supported by all browsers: it presents some problems in oldest browsers, such as Internet Explorer 5.0 and 5.5, which is now being in extinction.
If you want to make the code suitable for any browser, it is necessary to correct the box modeling problems of these browsers, with the different workarounds on the web.

How to paint scrollbars

A very interesting graphic effect, from the point of view of a less professional user, is the coloration of the browser scrollbars.
This effect is not supported by all browsers, in particular only Internet Explorer, version 5.5 onwards, has that support. This situation occurred because the colouring of the scrollbars is not a feature in the W3C standards and thus is not a requirement for the different browser.
Let's look at an example where are the sidebars browser to be customized.

body {
   scrollbar-3dlight-color: orange;
   scrollbar-arrow-color: #313131;
   scrollbar-base-color: red;
   scrollbar-darkshadow-color: #80FFFF;
   scrollbar-face-color: red;
   scrollbar-highlight-color: rgb(50,0,1);
   scrollbar-shadow-color: rgb(112,22,21);
   scrollbar-track-color: black;
}