1. 样式说明:
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块,能上下左右移动(取决于是垂直滚动条还是水平滚动条)
::-webkit-scrollbar-track 滚动条的轨道(里面装有thumb)
::-webkit-scrollbar-button 滚动条轨道两端的按钮,允许通过点击微调小方块的位置
::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
::-webkit-scrollbar-corner 边角,及两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
2. 示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.2);
border: none;
-webkit-border-radius: 4px;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(0,0,0,0.3);
}
::-webkit-scrollbar-track {
background-color: transparent;
border: none;
}
::-webkit-scrollbar-track:hover {
background-color: rgba(0,0,0,0.1);
}
::-webkit-scrollbar-track:active {
background-color: rgba(0,0,0,0.1);
}
::-webkit-scrollbar-corner {
background: transparent;
}
</style>
</head>
<body>
<div id="blackSquare" style="width:50px; height:4000px;"></div>
</body>
</html>
3. 效果: