IE is the first to provide style support for the scroll bar, for many years, but other browsers have not supported, ie alone lost.
These style rules are simple:
Scrollbar-arrow-color:color; /* The color of the triangular arrows */
Scrollbar-face-color:color; /* Color of the stereo scrollbar (including the background color of the arrow part) */
Scrollbar-3dlight-color:color; /* Color of the solid scroll bar */
Scrollbar-highlight-color:color; /* Highlight color of scroll bar (left shadow?) )*/
Scrollbar-shadow-color:color; /* Color of the stereoscopic scrollbar shadow */
Scrollbar-darkshadow-color:color; /* Color of the outer shadow of the stereoscopic scroll bar */
Scrollbar-track-color:color; /* Stereo scroll bar background color */
Scrollbar-base-color:color; /* The base color of the scroll bar */
That's about it, you can also define the cursor to define the mouse gesture of the scrollbar.
Here are the effects of several scroll bars:
1. Control the display of horizontal and vertical scroll bars
Remove scroll bar X-axis <body style= "Overflow-y:hidden" >
Remove scroll bar y-axis <body style= "Overflow-x:hidden" >
scroll bar x/y axis all removed <body scroll= "No" >
2. Scroll bar Color
<style>
body{
Scrollbar-face-color: #ffffff;
Scrollbar-highlight-color: #ffffff;
Scrollbar-shadow-color: #ffffff;
Scrollbar-3dlight-color: #ffffff;
Scrollbar-arrow-color: #ffffff;
Scrollbar-track-color: #eeeeee;
Scrollbar-darkshadow-color: #FFFFFF;}
</style>
Scrollbar-face-color the color of the bulge of the scroll bar
Scrollbar-highlight-color the color of the blank part of the scroll bar
Scrollbar-shadow-color color of a solid scrollbar shadow
Scrollbar-3dlight-color the color of the scroll bar's bright edges
Scrollbar-arrow-color the color of the triangular arrows on the top and bottom buttons
Scrollbar-track-color the background color of the scroll bar
Scrollbar-darkshadow-color the color of the scroll bar's strong shadows
Scrollbar-base-color basic color of scroll bars
3, arrow line symbol scroll bar code
<style type= "Text/css" >
<!--
BODY {scrollbar-face-color:white;
Scrollbar-highlight-color:white;
Scrollbar-shadow-color:white;
Scrollbar-3dlight-color:white;
Scrollbar-arrow-color:hotpink;
Scrollbar-track-color:white;
Scrollbar-darkshadow-color:white}
-
</style>
4, one side scroll bar code
<style type= "Text/css" >
<!--
BODY {scrollbar-face-color:white;
Scrollbar-highlight-color:white;
Scrollbar-shadow-color:hotpink;
Scrollbar-3dlight-color:white;
Scrollbar-arrow-color:hotpink;
Scrollbar-track-color:white;
Scrollbar-darkshadow-color:white}
-
</style>
5. Plain type scroll bar code
<style type= "Text/css" >
<!--
BODY {
Scrollbar-face-color:white;
Scrollbar-highlight-color:hotpink;
Scrollbar-shadow-color:hotpink;
Scrollbar-3dlight-color:white;
Scrollbar-arrow-color:hotpink;
Scrollbar-track-color:white;
Scrollbar-darkshadow-color:white}
-
</style>
6, one side scroll bar code
<style type= "Text/css" >
<!--
BODY {scrollbar-face-color:white;
Scrollbar-highlight-color:white;
Scrollbar-shadow-color:hotpink;
Scrollbar-3dlight-color:white;
Scrollbar-arrow-color:hotpink;
Scrollbar-track-color:white;
Scrollbar-darkshadow-color:white}
-
</style>
7, three-dimensional scroll bar code
<style type= "Text/css" >
<!--
BODY {scrollbar-face-color:pink;
Scrollbar-highlight-color:deeppink;
Scrollbar-shadow-color:lavenderblush;
Scrollbar-3dlight-color:lavenderblush;
Scrollbar-arrow-color:white;
Scrollbar-track-color:lavenderblush;
Scrollbar-darkshadow-color:deeppink}
-
</style>
?/p>
CSS Custom scroll bar style