css3修改浏览器scroll默认样式

巧技
QiaTia
1年前
0

原生的滚动条又宽又长, 特别的丑, 其实我们可以自己定义滚动条的:

定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸

::-webkit-scrollbar  {  
    width: 4px;  
    height: 4px;  
    background-color: #F5F5F5;  
}


定义滚动条轨道 内阴影+圆角

::-webkit-scrollbar-track  {  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  
    background-color: #FFF;  
}


定义滑块 内阴影+圆角

::-webkit-scrollbar-thumb  {  
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: #AAA;  
}


说明:

    还没人来评论哎,快来抢沙发吧