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

堅(jiān)守“ 做人真誠(chéng) · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價(jià)值觀，專業(yè)網(wǎng)站建設(shè)服務(wù)10余年為成都成都濕噴機(jī)小微創(chuàng)業(yè)公司專業(yè)提供成都企業(yè)網(wǎng)站定制營(yíng)銷網(wǎng)站建設(shè)商城網(wǎng)站建設(shè)手機(jī)網(wǎng)站建設(shè)小程序網(wǎng)站建設(shè)網(wǎng)站改版，從內(nèi)容策劃、視覺(jué)設(shè)計(jì)、底層架構(gòu)、網(wǎng)頁(yè)布局、功能開發(fā)迭代于一體的高端網(wǎng)站建設(shè)服務(wù)。

    我們?cè)谧远x滾動(dòng)條樣式前，首先要了解滾動(dòng)條的結(jié)構(gòu)。通俗來(lái)講，滾動(dòng)條由兩部分組成：一部分是可以滑動(dòng)的部分，我們稱它為滑塊；另一部分是滾動(dòng)條的軌道，也就是滑塊的軌道，一般來(lái)說(shuō)，為了美觀，滑塊的顏色要比軌道的顏色深一些。

    首先介紹滾動(dòng)條相關(guān)的CSS代碼，以及他們的含義

    ::-webkit-scrollbar：指滾動(dòng)條整體部分，它的屬性有width,height,background等

    ::-webkit-scrollbar-button：指滾動(dòng)條兩邊的按鈕。當(dāng)不需要時(shí)可以用display:none將其隱藏

    ::-webkit-scrollbar-track：指外層軌道部分，當(dāng)不需要時(shí)可以用display:none將其隱藏，也可以添加你想要的顏色

    ::-webkit-scrollbar-track-piece：指內(nèi)層軌道部分，即滾動(dòng)條中間的部分

    ::-webkit-scrollbar-thumb：指滾動(dòng)條里面可以拖動(dòng)的部分，也就是滑塊

    ::-webkit-scrollbar-corner：指邊角部分

    ::-webkit-resizer：他用來(lái)定義右下角滑塊的樣式

    但是最常用的是滾動(dòng)條整體部分（-webkit-scrollbar），滑塊（-webkit-scrollbar-thumb）以及外軌道（-webkit-scrollbar-track）三部分。

    接下來(lái)我們將div盒子里面超出的部分隱藏，給div設(shè)置滾動(dòng)條樣式，看看怎么用CSS實(shí)現(xiàn)滾動(dòng)條樣式。

    HTML部分：

    <divclass="scroll">

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    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)懸浮在該類指向的控件上時(shí)滑塊的樣式*/

    .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)懸浮在滑塊上時(shí)滑塊的樣式*/

    .scroll::-webkit-scrollbar-thumb:hover{

    background-color:rgba(0,0,0,.4);

    -webkit-box-shadow:inset1px1px0rgba(0,0,0,.1);

    }

    /*正常時(shí)候的主干部分*/

    .scroll::-webkit-scrollbar-track{

    border-radius:10px;

    -webkit-box-shadow:inset006pxrgba(0,0,0,0);

    background-color:white;

    }

    /*鼠標(biāo)懸浮在滾動(dòng)條上的主干部分*/

    .scroll::-webkit-scrollbar-track:hover{

    -webkit-box-shadow:inset006pxrgba(0,0,0,.4);

    background-color:rgba(0,0,0,.01);

    }

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

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

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

廣告

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