隐藏与修改滚动条样式

1.隐藏滚动条(只是隐藏滚动条,页面仍可移动)

/* 谷歌、苹果浏览器 */
::-webkit-scrollbar {
    display: none;
}

/* IE浏览器 */
::-ms-scrollbar {
    display: none;
}

/* 火狐浏览器 */
::-moz-scrollbar {
    display: none;
}

/* 欧朋浏览器 */
::-o-scrollbar {
    display: none;
}

2.修改滚动条样式(以谷歌、苹果浏览器为例,其他浏览器修改前缀即可

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
::-webkit-scrollbar  
{  
    width: 4px;    
    background-color: #fff;  
}  

/*定义滚动条轨道 内阴影+圆角*/  
::-webkit-scrollbar-track  
{  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  
    background-color: lightgray;  
}  

/*定义滑块 内阴影+圆角*/  
::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: #6E6E6E;  
}  

/*定义最上方和最下方的按钮*/
::-webkit-scrollbar-button{
     background-color: #fff;
     border:1px solid 6E6E6E;
     display: none;
}

猜你喜欢

转载自blog.csdn.net/cxzlp12345/article/details/84326475