参考博客
/p/da5d52630f36
/p/c2addb233acd
滚动条的样式主要有三部分组成：
::-webkit-scrollbar 滚动条整体样式；::-webkit-scrollbar-thumb 滑块部分；::-webkit-scrollbar-thumb 轨道部分；
示例 1
::-webkit-scrollbar {/*滚动条整体样式*//*高宽分别对应横竖滚动条的尺寸*/width : 10px;height: 10px;}::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 10px;box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);background : #535353;}::-webkit-scrollbar-track {/*滚动条里面轨道*/box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);border-radius: 10px;background : #ededed;}
示例 2
::-webkit-scrollbar {/*滚动条整体样式*//*高宽分别对应横竖滚动条的尺寸*/width : 10px;height: 10px;}::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius : 10px;background-color: skyblue;background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, 0.2) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, 0.2) 50%,rgba(255, 255, 255, 0.2) 75%,transparent 75%,transparent);}::-webkit-scrollbar-track {/*滚动条里面轨道*/box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);background : #ededed;border-radius: 10px;}
示例 3
/*整体部分*/::-webkit-scrollbar {width: 10px;height: 10px;}/*滑动轨道*/::-webkit-scrollbar-track {border-radius: 0px;background: none;}/*滑块*/::-webkit-scrollbar-thumb {border-radius: 5px;box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);background-color: rgba(255, 255, 255, 0.75);}/*滑块效果*/::-webkit-scrollbar-thumb:hover {border-radius: 5px;box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);background-color: rgba(85, 85, 85, 0.4);}
示例 4
::-webkit-scrollbar {width: 14px;height: 14px;}::-webkit-scrollbar-track,::-webkit-scrollbar-thumb {border-radius: 999px;border: 5px solid transparent;}::-webkit-scrollbar-track {box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;}::-webkit-scrollbar-thumb {min-height: 20px;background-clip: content-box;box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset;}::-webkit-scrollbar-corner {background: transparent;}
