纯css3自定义网页滚动条,浏览器统一scroll滚动条

支持-webkit-前缀的浏览器,滚动栏有五个css修饰:

整体部分,    ::-webkit-scrollbar

两端按钮,    ::-webkit-scrollbar-button

外层轨道,    ::-webkit-scrollbar-track

内层轨道,    ::-webkit-scrollbar-track-piece

滚动滑块,    ::-webkit-scrollbar-thumb

边角,            ::-webkit-scrollbar-corner

::-webkit-scrollbar{
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track{
    background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb{
    background: rgba(0, 0, 0, .3);
}
::-webkit-scrollbar-thumb:hover{
    background: rgba(0, 0, 0, 0.4);
}   

 

该方法是直接修改浏览器内置滚动条样式,全局设置,测试兼容浏览器除了ie和firefox其他浏览器都可以用

©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页