滚动条美化

Posted QueenyL

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了滚动条美化相关的知识,希望对你有一定的参考价值。

记一次滚动条美化

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
/*定义滚动条轨道(track)和滑块(thumb)*/
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
}
/*定义滚动条顶部(左侧)的按钮块*/
/*::-webkit-scrollbar-button:start 
    width: 10px;
    height: 12px;
}
定义滚动条底部(右侧)的按钮块*!
::-webkit-scrollbar-button:end {
    width: 10px;
    height: 12px;
}
::-webkit-scrollbar-button:start:hover {
    background-color: rgba(255, 255, 255, 1);
}
::-webkit-scrollbar-button:end {
    background-color: rgba(255, 255, 255, 1);
}*/
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.4);
}
/*定义水平和垂直滚动条两者的交界处(拐角)*/
::-webkit-scrollbar-corner {
    display: block;
}
::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, 0.2);
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 1);
}

 

以上是关于滚动条美化的主要内容,如果未能解决你的问题,请参考以下文章

滚动条美化插件 nicescroll

滚动条美化

美化滚动条样式

jScrollPane 美化滚动条

浏览器滚动条样式美化-案例

滚动条美化实践(原生js,iscroll,nicescroll)