隨著互聯(lián)網(wǎng)的發(fā)展渔工，人們對頁面的要求越來越高畦贸，不只是功能好用八堡，而且還要顏值高樟凄。前端開發(fā)人員對于瀏覽器的滾動條并不陌生，當自帶的一些滾動條無法滿足我們的審美時兄渺，你知道如何用CSS修改瀏覽器滾動條的樣式嗎缝龄？今天就給大家介紹如何設置div滾動條樣式。有需要的小伙伴可以參考一下挂谍。
我們在自定義滾動條樣式前叔壤，首先要了解滾動條的結(jié)構(gòu)。通俗來講口叙，滾動條由兩部分組成：一部分是可以滑動的部分炼绘，我們稱它為滑塊；另一部分是滾動條的軌道庐扫，也就是滑塊的軌道饭望，一般來說，為了美觀形庭，滑塊的顏色要比軌道的顏色深一些铅辞。
web前端全棧資料粉絲福利（面試題、視頻萨醒、資料筆記斟珊、進階路線）
首先介紹滾動條相關的CSS代碼，以及他們的含義
::-webkit-scrollbar：指滾動條整體部分富纸，它的屬性有width,height,background等
::-webkit-scrollbar-button ： 指滾動條兩邊的按鈕囤踩。當不需要時可以用display:none將其隱藏
::-webkit-scrollbar-track ：指外層軌道部分，當不需要時可以用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設置滾動條樣式，看看怎么用CSS實現(xiàn)滾動條樣式愉镰。
HTML部分：
<divclass="scroll">
????????have a nice day <br/>
????????have a nice day <br/>
????????have a nice day <br/>
????????have a nice day <br/>
????????have a nice day <br/>
????????have a nice day <br/>
????????have a nice day <br/>
????????have a nice day <br/>
????????have a nice day <br/>
????????have a nice day <br/>
????????have a nice day <br/>
????????have a nice day <br/>
????????have a nice day <br/>
????????have a nice day <br/>
????????have a nice day <br/>
????????have a nice day <br/>
????????have a nice day <br/>
????????have a nice day <br/>
????????have a nice day <br/>
????????have a nice day <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);
????????}
????????/*鼠標懸浮在該類指向的控件上時滑塊的樣式*/
????????.scroll:hover::-webkit-scrollbar-thumb {
???????????background-color: rgba(0,0,0,.2);
????????????border-radius: 10px;
????????????-webkit-box-shadow: inset1px1px0rgba(0,0,0,.1);
????????}
????????/*鼠標懸浮在滑塊上時滑塊的樣式*/
????????.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;
????????}
????????/*鼠標懸浮在滾動條上的主干部分*/
????????.scroll::-webkit-scrollbar-track:hover {
????????????-webkit-box-shadow: inset006pxrgba(0,0,0,.4);
????????????background-color: rgba(0,0,0,.01);
????????}
效果圖：
注意：如果是水平滾動條米罚，那么width屬性不起作用，height可以設置滾動條的高度丈探；如果是豎直滾動條录择，那么height高度不起作用，width可以用來設置滾動條的寬度碗降。在工作中可以根據(jù)需要設置想要的樣式隘竭，沒有接觸過得小伙伴可以多去嘗試，加深對知識點的理解遗锣，希望可以幫助到你货裹！
以上就是如何用CSS修改瀏覽器滾動條的樣式（實例詳解）的詳細內(nèi)容，更多請關注我＞ァ；≡病！
