Reset scroll bar style webkit
1, scrollbar comprising a scrollbar buttons and a track. track further subdivided into track pieces and thumb. trace pieces of the thumb portion and the upper half portion of the lower half.
2, scrollbar corner intersection of horizontal and vertical corner regions
3, resize to a dragging resized element provided on the junction of the small scroll bar control
Composition structure is as follows:
Once the scroll bar custom style, the default style settings of the browser will fail, using only css defined style. It means that value can not be provided separately or only the scrollbar button scrollbar track.
-webkit-scrollbar /* 滚动条整体部分，重置时必须要设置 */
-webkit-scrollbar-button /* 滚动条的轨道的两端按钮 */
-webkit-scrollbar-track /* 滚动条的轨道（包含thumb和trace-piece）*/
-webkit-scrollbar-track-piece /* 轨道中下方块的上下(左右)部分*/
-webkit-scrollbar-thumb /*滚动条里面的小方块*/
-webkit-scrollbar-corner /* 垂直和水平的交叉角 */
-webkit-resize // 滚动条的交汇处上用于拖动调整元素大小的小控件 */
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）The following classes may be combined with pseudo set (different operating system browser scroll bar may be different, all may be set according the following pseudo-class):
- : Horizontal direction of the horizontal track, track-piect, thumb
- : Track vertica vertical direction, track-piect, thumb
- : Decrement button up and left button, the up or left track-piece
- : Button increment down and right buttons, down and to the right of the track-piece
- : Start suitable buttons and track pieces, objects (buttons or trace piece) whether the slider on the front
- : End suitable buttons and track pieces, objects (buttons or trace piece) whether the slider on the back
- : Double-button applies to buttons and track pieces, the track end position is a pair of buttons
- : Single-button applies to buttons and track pieces, the end of the track location is a button
- : No-button suitable for track pieces, the end of the track position no buttons
- : Corner-present for all scrollbar, scrollbars corner of the existence of
- : Window-inactive for all ScrollBar, comprising scroll bar area, when the focus is not on the window
- : Enabled,: disabled,: hover,: active pseudo-classes which apply equally
IE scrollbar style reset
IE can only change the color of the scroll bar
scrollbar-arrow-color:#f2f2f3; /*上下箭头*/
scrollbar-track-color /*底层背景色*/
scrollbar-face-color /*滚动条前景色，对应thumb*/
scrollbar-shadow-color /*滚动条边线色,thubm的border*/
scrollbar-highlight-color /*滚动条整体颜色*/
scrollbar-base-color /* 滚动条基准颜色 */
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）