::-webkit-scrollbar应用属性阐明 详情见：::-webkit-scrollbar
::-webkit-scrollbar CSS 伪类元素会影响设置了 overflow:scroll; 的元素的滚动条款式。
备注： 如果没有设置 overflow:scroll;，元素的滚动条将不会显示。
备注： ::-webkit-scrollbar 仅在基于 Blink 或 WebKit 的浏览器（例如，Chrome、Edge、Opera、Safari、iOS 上所有的浏览器，以及其余基于 WebKit 的浏览器）上可用。滚动条款式的规范办法可用于 scrollbar-color 和 scrollbar-width。
CSS 滚动条选择器
你能够应用以下伪元素选择器去批改基于 webkit 的浏览器的滚动条款式：
- ::-webkit-scrollbar——整个滚动条。
- ::-webkit-scrollbar-button——滚动条上的按钮（高低箭头）。
- ::-webkit-scrollbar-thumb——滚动条上的滚动滑块。
- ::-webkit-scrollbar-track——滚动条轨道。
- ::-webkit-scrollbar-track-piece——滚动条没有滑块的轨道局部。
- ::-webkit-scrollbar-corner——当同时有垂直滚动条和程度滚动条时交汇的局部。通常是浏览器窗口的右下角。
- ::-webkit-resizer——呈现在某些元素底角的可拖动调整大小的滑块。
CSS应用示例
实用所有能够滚动的元素间接 ::-webkit-scrollbar 结尾
/* 1,滚动条 */ ::-webkit-scrollbar { width: 15px; /* 纵向滚动条 宽度 */ height: 15px; /* 横向滚动条 高度 */ background: blue; /* 整体背景 */ border-radius: 10px; /* 整体 圆角 * } /* 2,滚动条两端的按钮 */ ::-webkit-scrollbar-button{ width: 15px; /* 横向滚动条 宽度 */ height: 15px; /* 纵向滚动条 高度 */ background: black; border-radius: 10px; } /* 3,外层轨道 */ ::-webkit-scrollbar-track { /* background: red; */ border-radius: 10px; } /* 4.内层轨道，它会笼罩外层轨道的款式。 */ ::-webkit-scrollbar-track-piece { width: 5px; background-color:red; margin: 0 -2px 0; } /* 5,滑块 */ ::-webkit-scrollbar-thumb { background: #bec5ca; min-height: 50px; min-width: 50px; border-radius: 10px; } /* 纵向滑块悬浮 */ ::-webkit-scrollbar-thumb:vertical:hover { background: yellow; } /* 横向滑块悬浮 */ ::-webkit-scrollbar-thumb:horizontal:hover { background: pink } /* 6,边角，两个滚动条交汇处 */ ::-webkit-scrollbar-corner{ background: blue; }只实用于特定的局部，须要在选择器之前附加元素，增加一个类名，比方
.part::-webkit-scrollbar { width: 15px; /* 纵向滚动条 宽度 */ height: 15px; /* 横向滚动条 高度 */ background: blue; /* 整体背景 */ border-radius: 10px; /* 整体 圆角 *}