一、谷歌:
1、全局修改,所有滚动条生效:
// 滚动条整体样式
::-webkit-scrollbar {
width: 10px; // 高宽分别对应横竖滚动条的尺寸
height: 1px;
}
// 滚动条里面小方块
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #E5E5E5;
}
// 滚动条里面轨道
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
background: #ffffff;
}
// 滚动条上下的箭头按钮
::-webkit-scrollbar-button {
display: none;
}
2、针对某个容器修改:
// 滚动条整体样式
div::-webkit-scrollbar {
width: 10px; // 高宽分别对应横竖滚动条的尺寸
height: 1px;
}
// 滚动条里面小方块
div::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #E5E5E5;
}
// 滚动条里面轨道
div::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
background: #ffffff;
}
// 滚动条上下的箭头按钮
div::-webkit-scrollbar-button {
display: none;
}
3、隐藏滚动条:
::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
}
二、火狐:
1、火狐滚动条样式通过scrollbar-color和scrollbar-width两个属性控制:
// 表示div这个容器的滚动条样式,可以换成其他的选择器
div {
scrollbar-color: #F15A29 #ffffff;
scrollbar-width: auto;
}
2、隐藏滚动条:
scrollbar-width: none;
三、ie:
// 表示div这个容器的滚动条样式,可以换成其他的选择器
div {
scrollbar-face-color: #F15A29;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #ffffff;
}