默认滚动条样式修改

伪元素 -webkit-scrollbar

• 注意：仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用

滚动条元素组成

::-webkit-scrollbar 滚动条整体部分，可以设置宽度等
::-webkit-scrollbar-thumb 滚动条里面的滑块
::-webkit-scrollbar-button 滚动条轨道两端的按钮，允许通过点击以微调滑块的位置
::-webkit-scrollbar-track 滚动条的轨道(里面装有thumb)
::-webkit-scrollbar-track-piece 滚动条没有滑块的轨道部分
::-webkit-scrollbar-corner 当同时有垂直滚动条和水平滚动条时的交汇处
::-webkit-resizer 某些元素的corner部分(如textarea的可拖动按钮)

滚动条设置

div::-webkit-scrollbar {
 width: 3px;
 height: 5px !important;
}
div::-webkit-scrollbar-thumb {
	border-radius: 4px;
	border-radius: 5px;
    background: rgb(221, 222, 224);
    transition: 0.3s ease-in-out;
}
div::-webkit-scrollbar-track {
	border-radius: 0;
	background: rgba(3, 131, 226, 0.1);
}