CSS custom scroll bar style and color

Private Properties of IE:

The code is as follows:

Copy code

Scrollbar-arrow-color: color;/* color of the triangle arrow */ Scrollbar-face-color: color;/* color of the three-dimensional scroll bar (including the background color of the arrow )*/ Scrollbar-3dlight-color: color;/* color of the bright side of the stereo scroll bar */ Scrollbar-highlight-color: color;/* the highlighted color of the scroll bar (left shadow ?) */ Scrollbar-shadow-color: color;/* color of the shadow of the three-dimensional scroll bar */ Scrollbar-darkshadow-color: color;/* color of the Shadow outside the three-dimensional scroll bar */ Scrollbar-track-color: color;/* stereo scroll bar background color */ Scrollbar-base-color: color;/* base color of the scroll bar */

The default scroll bar on the right of the browser may be a little dull. In addition, different operating systems (Mac OS, Windows XP 78) are displayed. Generally, this is not a big problem, or even a problem. But you always need to change it when writing it. It is a little different to highlight your personality. For example, QQ Music and my personal homepage. The css definition scroll bar style mentioned here is only limited to the webkit browser. It is defined by some pseudo classes of css.

The code is as follows:	Copy code
:-Webkit-scrollbar // The overall part of the scroll bar :-Webkit-scrollbar-button // buttons at both ends of the scroll bar :-Webkit-scrollbar-track // Outer Orbital :-Webkit-scrollbar-track-piece // inner track, middle part of the scroll bar (excluded) :-Webkit-scrollbar-thumb // (the one that can be dragged in the scroll bar) :-Webkit-scrollbar-corner // corner :-Webkit-resizer

// Define the style of the drag block in the lower right corner. In fact, there are more and more pseudo classes to control the scroll bar style, but some of the above lists can already meet the basic needs.

In addition:

It should be noted that the IE browser is actually the first to provide style support for the scroll bar, but other browsers do not buy Microsoft accounts, so only IE supports it, in addition, I personally think that the style implemented by IE is ugly. Someone has developed a set of Flash tools to generate this style online. If you want to know more, you can click here. In addition, there are some plug-ins on the Internet to implement customization. If you want to have a consistent experience in multiple browsers, you can try using the plug-in.

Demo or code:

The code is as follows:

Copy code

:-Webkit-scrollbar { Width: 14px; Height: 14px; Background:-webkit-gradient (linear, left top, right top, color-stop (0%, rgba (202,202,202, 0.07), color-stop (100%, rgba (229,229,229, 0.07 ))); Background:-webkit-linear-gradient (left, rgba (202,202,202, 0.07) 0%, rgba (229,229,229, 0.07) 100% ); Background-color: rgba (229,229,229,. 3 ); -Webkit-box-shadow: 0 0 1px 0 rgba (0, 0, 0,. 15) inset, 0 1px 0 0 0 # fff; Box-shadow: 0 0 1px 0 rgba (0, 0,. 15) inset, 0 1px 0 0 0 # fff; Overflow: visible; Border-radius: 4px; Border: solid 1px # A6A6A6; } :-Webkit-scrollbar-button { Width: 0; Height: 0; Display: block; Background-color: transparent; } :-Webkit-scrollbar-track { }:-Webkit-scrollbar-track-piece { }::-Webkit-scrollbar-thumb { Background:-webkit-gradient (linear, left top, right top, color-stop (0%, rgba (233,233,233, 0.05), color-stop (100%, rgba (221,221,221, 0.05 ))); Background:-webkit-linear-gradient (left, rgba (233,233,233, 0.05) 0%, rgba (221,221,221, 0.05) 100% ); -Webkit-box-shadow: 0 2px 1px 0 rgba (0, 0,. 05), inset 1px 1px 0 0 0 # FFF; Box-shadow: 0 2px 1px 0 rgba (0, 0,. 05), inset 1px 1px 0 0 0 # FFF; Background-color: rgba (229,229,229,. 9 ); Overflow: visible; Border-radius: 4px; Border: solid 1px # A6A6A6; } :-Webkit-scrollbar-thumb: hover { Background-color: rgba (229,229,229,. 4 ); } :-Webkit-scrollbar-thumb: active { Background-color: rgba (229,229,229, 1 ); -Webkit-box-shadow: 0 0 1px 0 rgba (0, 0, 0,. 15) inset; Box-shadow: 0 0 1px 0 rgba (0, 0, 0,. 15) inset; } :-Webkit-scrollbar-corner { } :-Webkit-resizer { }::-Webkit-scrollbar {width: 12px; height: 12px} :-Webkit-scrollbar-button: vertical {display: none} :-Webkit-scrollbar-track: vertical {background-color: black} :-Webkit-scrollbar-track-piece {background: # FFF} :-Webkit-scrollbar-thumb: vertical {background-color: #999 ;} :-Webkit-scrollbar-thumb: vertical: hover {background-color: # 9f9f9f} :-Webkit-scrollbar-corner: vertical {background-color: #535353} :-Webkit-scrollbar-resizer: vertical {background-color: # FF6E00}

Of course, webkit provides more than this, and there are many pseudo classes that can enrich the scroll bar style:

: Horizontal-scroll bar applied in the horizontal direction
: Vertical-scroll bar applied in the vertical direction
: Decrement-applied to buttons and inner tracks (track piece ). It is used to indicate whether the button or the inner track reduces the position of the window (for example, the top of the vertical scroll bar and the left side of the horizontal scroll bar .)
: Increment-similar to decrement, used to indicate whether the button or the inner track will increase the position of the window (for example, below the vertical scroll bar and right of the horizontal scroll bar .)
: Start-apply to buttons and slider. It defines whether an object is placed before the slider.
: End-similar to the start pseudo-class, it identifies whether the object is placed behind the slider.
: Double-button-this pseudo class is used for buttons and inner orbital. Used to determine whether a button is placed in a pair of buttons at the same end of the scroll bar. For an inner orbital, it indicates whether the inner orbital is close to a pair of buttons.
: Single-button-is similar to the double-button pseudo class. A button is used to determine whether a button is independent at one end of the scroll bar. For an inner orbital, it indicates whether the inner orbital is close to a single-button.
: No-button-used for the inner orbital, indicating whether the inner orbital must be rolled to the terminal of the scroll bar. For example, when there are no buttons at either side of the scroll bar.
: Corner-present-used for all scroll bar blocks, indicating whether the rounded corner of the scroll bar is displayed.
: Window-inactive-indicates whether a page container (element) of the application scroll bar is activated. (In the latest version of webkit, this pseudo-class can also be used as the: selection pseudo element. The webkit team has plans to expand it and push it into a standard pseudo class)
In addition, pseudo classes such as enabled, disabled, hover, and active can also be used in the scroll bar.