网络日志

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这是一个非标准的特性,仅在基于 BlinkWebKit 的浏览器(例如,Chrome、Edge、Opera、Safari、iOS 上所有的浏览器,以及其它基于 WebKit 的浏览器)上可用。

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

::-webkit-scrollbar-thumb定义滚动条本身的圆角、阴影、背景颜色等相关属性。