css自定义设置浏览器（Webkit内核）滚动条样式

一，常用属性。

::-webkit-scrollbar{ } /*滚动条垂直方向的宽度与水平方向的高度，颜色*/

::-webkit-scrollbar-button{ } /*滚动条按钮*/

::-webkit-scrollbar-track{ } /*滚动条轨道*/

::-webkit-scrollbar-track-piece{ } /*滚动条垂直方向轨道件*/

 ::-webkit-scrollbar-thumb{ } /*滚动条轨道上的按钮*/

::-webkit-scrollbar-corner{ } /*滚动条轨道上的滚动角*/ 

::-webkit-resizer{ }/**/

二,垂直横向设置。

:horizontal  /*横向滚动条*/

:vertical  /*垂直滚动条*/

:window-inactive   /*窗口未激活状态*/

三,简单使用。

.set_scroll_bar::-webkit-scrollbar {
	width: 5px;
	border-radius: 10px;
	background-color: rgba(217, 217, 217, 0.5);

}

.set_scroll_bar::-webkit-scrollbar:horizontal //横向滚动条样式

{

	height: 5px;
	border-radius: 10px;
	background-color: rgba(217, 217, 217, 0.5);

}
.set_scroll_bar::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background-color: rgba(0, 0, 0, 0.2);
}

.set_scroll_bar::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(217, 217, 217, 0.3);
	background-color: #fff;
}

四，完整写法及其他浏览器兼容。

/*webkit内核*/
.set_scroll_bar::-webkit-scrollbar {
    
}
.set_scroll_bar::-webkit-scrollbar-button    {
    
}
.set_scroll_bar::-webkit-scrollbar-track     {
   
}
.set_scroll_bar::-webkit-scrollbar-track-piece {
   
}
.set_scroll_bar::-webkit-scrollbar-thumb{
  
}
.set_scroll_bar::-webkit-scrollbar-corner {
   
}
.set_scroll_bar::-webkit-scrollbar-resizer  {
   
}
.set_scroll_bar::-webkit-scrollbar {
  
}
/*o内核*/
.set_scroll_bar .-o-scrollbar{
    -moz-appearance: none ;   
  
}
.set_scroll_bar::-o-scrollbar-button    {
  
}
.set_scroll_bar::-o-scrollbar-track     {
   
}
.set_scroll_bar::-o-scrollbar-track-piece {
   
}
.set_scroll_bar::-o-scrollbar-thumb{
   
}
.set_scroll_bar::-o-scrollbar-corner {
   
}
.set_scroll_bar::-o-scrollbar-resizer  {
   
}

/*IE10,IE11,IE12内核*/
.set_scroll_bar{
    -ms-scroll-chaining: chained;
    -ms-overflow-style: none;
    -ms-content-zooming: zoom;
    -ms-scroll-rails: none;
    -ms-content-zoom-limit-min: 100%;
    -ms-content-zoom-limit-max: 500%;
    -ms-scroll-snap-type: proximity;
    -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
    -ms-overflow-style: none;
    overflow: auto;
}