Roots
Back
  

Expand All
Contract All

CSS Scrollbars

Overflow

overflow: visible / hidden / scroll / auto;

visible - All content will be visible - if it exceeds the size of the containing element, it will continue outside its bounds.
hidden - Any content that exceeds the size of its container will be hidden.
scroll - Any content that exceeds the size of its container will be hidden, but there will always be a scrollbar present to see the rest of it.
auto - If the content exceeds the size of its container, scrollbars will appear, otherwise they will be hidden.

Scrollbar Base Color

This only works in certain browsers, like IE. Browsers that it doesn't work for, like Firefox, will simply see plain grey scrollbars.

scrollbar-base-color: name / code;

name - The name of a color. There are many different words which are recognised, such as aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

code - The hex code for a color.

This will make your scrollbars appear as though seen through a filter of the color you specify. They will not be the same color all over, but will retain the highlights and shadows you can see on the standard grey scrollbars.

You can change these individual color properties of the scrollbars using the following code;

Scrollbar Individual Color Properties

scrollbar-face-color: name / code;
scrollbar-arrow-color: name / code;
scrollbar-3dlight-color: name / code;
scrollbar-highlight-color: name / code;
scrollbar-shadow-color: name / code;
scrollbar-darkshadow-color: name / code;




You can see what areas of the scrollbar these different names represent by looking at the image on the right.



Any of the above lines will replace the default color for that part, or the color that would be applied to that part by the scrollbar-base-color selector if it is used.



Notice how the track of the scrollbar is made of checkered squares in the color of the face, and the highlight.



If you want it to be a solid color, you can add the following code;



Scrollbar Track Color

scrollbar-track-color: name / code;