CSS修改瀏覽器滾動條樣式的方法

這篇文章主要介紹“CSS修改瀏覽器滾動條樣式的方法”，在日常操作中，相信很多人在CSS修改瀏覽器滾動條樣式的方法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS修改瀏覽器滾動條樣式的方法”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

堅守“ 做人真誠 · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價值觀，專業(yè)網(wǎng)站建設(shè)服務(wù)10余年為成都成都濕噴機小微創(chuàng)業(yè)公司專業(yè)提供成都企業(yè)網(wǎng)站定制營銷網(wǎng)站建設(shè)商城網(wǎng)站建設(shè)手機網(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實現(xiàn)滾動條樣式。

HTML部分：

<divclass="scroll">

haveaniceday<br/>

</div>

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);

}
CSS修改瀏覽器滾動條樣式的方法

到此，關(guān)于“CSS修改瀏覽器滾動條樣式的方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

文章名稱：CSS修改瀏覽器滾動條樣式的方法
本文網(wǎng)址：http://bm7419.com/article24/gipjce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、外貿(mào)建站、移動網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、網(wǎng)站設(shè)計公司、網(wǎng)站維護(hù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容