Scroll bar style settings

Each scroll bar Property Description

:: - webkit-scrollbar: scrollbar integral part of which attributes are width, height, background, border, etc.

:: - webkit-scrollbar-button: Button both ends of the scroll bar. You can use display: none is not allowed to display, you can also add a background image, color change display.

:: - webkit-scrollbar-track: the outer track. You can use display: none is not allowed to display, you can also add a background image, color change display.

:: - webkit-scrollbar-track-piece: the inner track, the specific differences see Figure gif below, to note that it would cover a third of the style property.

:: - webkit-scrollbar-thumb: You can drag the scroll bar inside that part

:: - webkit-scrollbar-corner: the corner, two scroll bars Interchange

:: - webkit-resizer: two small scroll bar controls Interchange for dragging a resized element (basically irrelevant)

 

 

Scrollbar effects css code is as follows, each can be modified:

/ * Style main portion CSS * / 
/ * define the width and height of the scroll bar and the background, respectively, width and height dimensions corresponding to the vertical scroll bar * / 

:: - WebKit-ScrollBar { 
width : 10px ; / * valid bar for vertical flow * / 
height : 10px ; / * effective horizontal flow strip * / 
} / * orbital scroll bar color definition, the shadow and fillet * / 
:: - WebKit-track-scrollBar { 
-webkit-Box-shadow : the inset from 0 0 6px RGBA (0,0,0, .3) ; 
background-color : RosyBrown ; 
border-RADIUS : 3px ; 
} / * define the color of the slider, and the inner fillet shading * /





:: - WebKit-Thumb-ScrollBar { 
border-RADIUS : 7px ; 
-webkit-Box-Shadow : the inset from 0 0 6px RGBA (0,0,0, .3) ; 
background-Color : # E8E8E8 ; 
} / * defines two end button styles * / 
:: - WebKit-ScrollBar-button { 
background-Color : Cyan ; 
} / * define the lower right corner of the confluence pattern * / 
:: - WebKit-corner-ScrollBar { 
background : Khaki ; 
}