共计 520 个字符,预计需要花费 2 分钟才能阅读完成。
在我的项目中实现自定义滚动条代码实现
::-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
定义滚动条自身的圆角、暗影、背景色彩等相干属性。
正文完