css滚动条样式修改

• css滚动条样式修改很常见，首先需要了解滚动条的一些属性

滚动条的组成：

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块，能上下左右移动
::-webkit-scrollbar-track 滚动条的轨道
::-webkit-scrollbar-button 滚动条轨道两端的按钮，允许通过点击微调小方块的位置
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，及两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

• 就直接上代码了

//table-box为父级，也可在全局直接使用::-webkit-scrollbar
.table-box::-webkit-scrollbar {
  width: 4px;
}

.table-box::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px linear-gradient(rgb(126, 238, 255), rgb(83, 155, 255));
  background-image: linear-gradient(rgb(126, 238, 255), rgb(83, 155, 255))
}

.table-box::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgb(26, 31, 40);
  border-radius: 0;
  background: rgb(26, 31, 40);
}

• 效果图（有点简陋了，一个渐变色的滚动条）
  
• 如果需要隐藏滚动条

//也可在::前搭配父级class名使用
::-webkit-scrollbar {
	border-width:1px;
}