這篇文章主要介紹“CSS修改瀏覽器滾動條樣式的方法”，在日常操作中，相信很多人在CSS修改瀏覽器滾動條樣式的方法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS修改瀏覽器滾動條樣式的方法”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
堅(jiān)守“ 做人真誠 · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價值觀，專業(yè)網(wǎng)站建設(shè)服務(wù)10余年為成都成都濕噴機(jī)小微創(chuàng)業(yè)公司專業(yè)提供成都企業(yè)網(wǎng)站定制營銷網(wǎng)站建設(shè)商城網(wǎng)站建設(shè)手機(jī)網(wǎng)站建設(shè)小程序網(wǎng)站建設(shè)網(wǎng)站改版，從內(nèi)容策劃、視覺設(shè)計、底層架構(gòu)、網(wǎng)頁布局、功能開發(fā)迭代于一體的高端網(wǎng)站建設(shè)服務(wù)。
我們在自定義滾動條樣式前，首先要了解滾動條的結(jié)構(gòu)。通俗來講，滾動條由兩部分組成：一部分是可以滑動的部分，我們稱它為滑塊；另一部分是滾動條的軌道，也就是滑塊的軌道，一般來說，為了美觀，滑塊的顏色要比軌道的顏色深一些。
首先介紹滾動條相關(guān)的CSS代碼，以及他們的含義
::-webkit-scrollbar：指滾動條整體部分，它的屬性有width,height,background等
::-webkit-scrollbar-button：指滾動條兩邊的按鈕。當(dāng)不需要時可以用display:none將其隱藏
::-webkit-scrollbar-track：指外層軌道部分，當(dāng)不需要時可以用display:none將其隱藏，也可以添加你想要的顏色
::-webkit-scrollbar-track-piece：指內(nèi)層軌道部分，即滾動條中間的部分
::-webkit-scrollbar-thumb：指滾動條里面可以拖動的部分，也就是滑塊
::-webkit-scrollbar-corner：指邊角部分
::-webkit-resizer：他用來定義右下角滑塊的樣式
但是最常用的是滾動條整體部分（-webkit-scrollbar），滑塊（-webkit-scrollbar-thumb）以及外軌道（-webkit-scrollbar-track）三部分。
接下來我們將div盒子里面超出的部分隱藏，給div設(shè)置滾動條樣式，看看怎么用CSS實(shí)現(xiàn)滾動條樣式。
HTML部分：
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
CSS部分：
.scroll{
margin:100pxauto;
border:1pxsolid#000;
width:200px;
height:300px;
overflow:auto;
}
.scroll::-webkit-scrollbar{
width:10px;
height:10px;
}
/*正常情況下滑塊的樣式*/
.scroll::-webkit-scrollbar-thumb{
background-color:rgba(0,0,0,.05);
border-radius:10px;
-webkit-box-shadow:inset1px1px0rgba(0,0,0,.1);
}
/*鼠標(biāo)懸浮在該類指向的控件上時滑塊的樣式*/
.scroll:hover::-webkit-scrollbar-thumb{
background-color:rgba(0,0,0,.2);
border-radius:10px;
-webkit-box-shadow:inset1px1px0rgba(0,0,0,.1);
}
/*鼠標(biāo)懸浮在滑塊上時滑塊的樣式*/
.scroll::-webkit-scrollbar-thumb:hover{
background-color:rgba(0,0,0,.4);
-webkit-box-shadow:inset1px1px0rgba(0,0,0,.1);
}
/*正常時候的主干部分*/
.scroll::-webkit-scrollbar-track{
border-radius:10px;
-webkit-box-shadow:inset006pxrgba(0,0,0,0);
background-color:white;
}
/*鼠標(biāo)懸浮在滾動條上的主干部分*/
.scroll::-webkit-scrollbar-track:hover{
-webkit-box-shadow:inset006pxrgba(0,0,0,.4);
background-color:rgba(0,0,0,.01);
}
到此，關(guān)于“CSS修改瀏覽器滾動條樣式的方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！
重慶分公司
重慶分公司
