滚动条样式
/*------- ## 滚动条开始 -------*/
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内核的浏览器
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
和主题很搭配,有点老ios系统的拟物风
有演示么?
tmioe.com 可以看看