webkit滚动条样式自定义

webkit滚动条样式属性

<style>
::-webkit-scrollbar {
  width: 10px;   // 纵向滚动条宽度
  height: 10px;  // 横向滚动条高度
}
// 滚动条滑槽样式
::-webkit-scrollbar-track {
  background: none;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 8px;
}
// 横纵坐标交叉点的小方块
::-webkit-scrollbar-corner {
  background: rgba(0,0,0,.3);
} 
// 滚动条样式
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: rgba(0,0,0,.3);
}

// 滚动条hover的样式
::-webkit-scrollbar-thumb:hover {	

}
// 滚动条按下的样式
::-webkit-scrollbar-thumb:active {	

}
</style>