這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)怎么在css中修改滾動條樣式，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)總部坐落于成都市區(qū)，致力網(wǎng)站建設(shè)服務(wù)有成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷策劃、網(wǎng)頁設(shè)計、網(wǎng)站維護(hù)、公眾號搭建、微信小程序、軟件開發(fā)等為企業(yè)提供一整套的信息化建設(shè)解決方案。創(chuàng)造真正意義上的網(wǎng)站建設(shè)，為互聯(lián)網(wǎng)品牌在互動行銷領(lǐng)域創(chuàng)造價值而不懈努力！

CSS設(shè)置代碼：

*{
scrollbar-face-color:#fff;/*滑塊顏色*/ 
  scrollbar-arrow-color:#000; /*箭頭顏色*/
  scrollbar-shadow-color:#000000; /*滑塊邊線顏色*/
  scrollbar-track-color:#dde3fa; /*滑軌顏色*/
}

此設(shè)置對所有滾動條都有作用。

為了兼容其他瀏覽器還需要做一些功夫。這里針對webkit瀏覽器做一些設(shè)置。同樣我們還是有必要先了解其屬性：

::-webkit-scrollbar{}/*整體設(shè)置*/
::-webkit-scrollbar-button ：滾動條兩端的按鈕。可以用display:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果。
::-webkit-scrollbar-track ：外層軌道?？梢杂胐isplay:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果。
::-webkit-scrollbar-track-piece ：內(nèi)層軌道，具體區(qū)別看下面gif圖，需要注意的就是它會覆蓋第三個屬性的樣式。
::-webkit-scrollbar-thumb ：滾動條里面可以拖動的那部分
::-webkit-scrollbar-corner ：邊角，兩個滾動條交匯處
::-webkit-resizer ：兩個滾動條交匯處用于拖動調(diào)整元素大小的小控件（基本用不上）

使用偽元素設(shè)置CSS。

繼續(xù)添加以下代碼

::-webkit-scrollbar{background-color: #000}
::-webkit-scrollbar-track {
background-color: #7dc2f6;
} 
::-webkit-scrollbar-thumb {
background-color: #1b99f7;
} 
::-webkit-scrollbar-button {
background-color: #b9e0fd;
} 
::-webkit-scrollbar-corner {
background-color: #018ef8;
}

再次測試輸出，現(xiàn)在IE和谷哥類瀏覽器都能看到變化了。

上述就是小編為大家分享的怎么在css中修改滾動條樣式了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。