一、谷歌：
1、全局修改，所有滾動(dòng)條生效：
// 滾動(dòng)條整體樣式
::-webkit-scrollbar {
? ? width: 10px; // 高寬分別對(duì)應(yīng)橫豎滾動(dòng)條的尺寸
height: 1px;
}
// 滾動(dòng)條里面小方塊
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #E5E5E5;
}
// 滾動(dòng)條里面軌道
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
background: #ffffff;
}
// 滾動(dòng)條上下的箭頭按鈕
::-webkit-scrollbar-button {
display: none;
}2、針對(duì)某個(gè)容器修改：
// 滾動(dòng)條整體樣式
div::-webkit-scrollbar {
width: 10px; // 高寬分別對(duì)應(yīng)橫豎滾動(dòng)條的尺寸
height: 1px;
}
// 滾動(dòng)條里面小方塊
div::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #E5E5E5;
}
// 滾動(dòng)條里面軌道
div::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
background: #ffffff;
}
// 滾動(dòng)條上下的箭頭按鈕
div::-webkit-scrollbar-button {
display: none;
}3、隱藏滾動(dòng)條：
::-webkit-scrollbar {
? ? display: none;
? ? width: 0 !important;
? ? height: 0 !important;
? ? -webkit-appearance: none;
? ? background: transparent;
}二、火狐：
1、火狐滾動(dòng)條樣式通過(guò)scrollbar-color和scrollbar-width兩個(gè)屬性控制：
// 表示div這個(gè)容器的滾動(dòng)條樣式，可以換成其他的選擇器
div {
? ? scrollbar-color: #F15A29 #ffffff;
scrollbar-width: auto;
}2、隱藏滾動(dòng)條：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-815419.html
scrollbar-width: none;三、ie：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-815419.html
// 表示div這個(gè)容器的滾動(dòng)條樣式，可以換成其他的選擇器
div {
? ? scrollbar-face-color: #F15A29;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #ffffff;
}到了這里，關(guān)于谷歌、火狐、ie瀏覽器更改滾動(dòng)條樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
