关于html:scrollbar滚动条样式的自定义及其属性分析

在我的项目中实现自定义滚动条代码实现

::-webkit-scrollbar {    width: 10px;    height: 10px;}::-webkit-scrollbar-thumb {    border-radius: 50px;    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);    background: #ccc;}::-webkit-scrollbar-thumb:hover {    background: #b4b4b4;}::-webkit-scrollbar-track {    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);    border-radius: 8px;}

代码属性剖析

首先，::-webkit-scrollbar这是一个非标准的个性，仅在基于 Blink 或 WebKit 的浏览器（例如，Chrome、Edge、Opera、Safari、iOS 上所有的浏览器，以及其它基于 WebKit 的浏览器）上可用。

::-webkit-scrollbar定义竖向滚动条的宽度和横向滚动条多的高度。

::-webkit-scrollbar-thumb定义滚动条自身的圆角、暗影、背景色彩等相干属性。