谷歌、火狐、ie浏览器更改滚动条样式-Toy模板网

这篇具有很好参考价值的文章主要介绍了谷歌、火狐、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：文章来源地址https://www.toymoban.com/news/detail-815419.html

// 表示div这个容器的滚动条样式，可以换成其他的选择器
div {
    scrollbar-face-color: #F15A29;
    scrollbar-highlight-color: #ffffff;
    scrollbar-3dlight-color: #ffffff;
}

到了这里，关于谷歌、火狐、ie浏览器更改滚动条样式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！