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;
}