谷歌、火狐、ie浏览器更改滚动条样式

一、谷歌：

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