CSS scroll bar styles

1 Overview

1.1 Description

Sometimes for aesthetic style scroll bar will default to the beautification through css

1.2 scrollbar content

1.2.1 The appearance of the scroll bar to view

　　　　1. slidable content (the solid contents of the intermediate), i.e. the slider.

　　　　2. Scroll bars frame (track), this slider to slide inside, namely track

1.2.1 Scroll bar style

• • :: - webkit-scrollbar defines the overall style of the scrollbar
  • :: - webkit-scrollbar-thumb slider portion (scroll bar inside a small box, to up / down or left / right)
  • :: - webkit-scrollbar-track rail section (inside with thumb)

 2. Code

　　Scrollbar is compatible with Windows and mac

// definition of scroll bars and background, high width corresponding width dimension vertical scroll bar 
:: - webkit-scrollbar { 
  width : 5px ; 
  height : 5px ; 
} 
// shadows within the definition of the slider fillet + 
:: - webkit-scrollbar -thumb { 
  border-RADIUS : 1em ; 
  background-Color : RGBA (50,50,50, .3) ; 
} 
// shadows defined within the scroll bar track fillet + 
:: - WebKit-track-scrollBar { 
  border-RADIUS : 1em ; 
  background-Color : RGBA (50,50,50, .1) ; 
}