滚动条样式

请注意,本文编写于 221 天前,最后修改于 221 天前,其中某些信息可能已经过时。

/*------- ## 滚动条开始 -------*/
body::-webkit-scrollbar{
    width: 10px;
    height: 10px;
}
body::-webkit-scrollbar-track{
    background: rgba(0, 0, 0, 0);
}
body::-webkit-scrollbar-thumb{
    background:linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
    border-radius:6px;
}
body::-webkit-scrollbar-thumb:hover{
    background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);
}
/*------- ## 滚动条结束 -------*/

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-button 滚动条两端的按钮。可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track 外层轨道。可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)。
::-webkit-scrollbar-thumb 滚动条里面可以拖动的那部分
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式

适用于webkit内核的浏览器

已有 3 条评论

和主题很搭配,有点老ios系统的拟物风

猫叔 猫叔 回复 @成人之美
0 0

tmioe.com 可以看看