css3實現自定義滾動條樣式詳解

在寫頁面的時候有時候滾動條的樣式與頁面風格不統一這時候就用到了自定義滾動條

1、首先弄清楚頁面的滾動條分為哪些部分，在寫的時候分為幾塊

定義滾動條的時候先進行宏觀定義，定義滾動條，然后定義滑塊，然后定義滑塊的軌道，總之很簡單，結構如下

::-webkit-scrollbar   定義了滾動條整體的樣式；::-webkit-scrollbar-thumb  滑塊部分；::-webkit-scrollbar-thumb  軌道部分；

 

一開始不想要顯示的時候可以定義overflow=auto,這樣只有需要滾動條的時候才會展示，代碼如下

 

.overview_alarm_list{
        height: 100%;
        overflow-x: auto;
        border: none;
    }
    /*定義滾動條的整體樣式使其變窄*/
    .overview_scroll::-webkit-scrollbar{
        width: 4px;
        height: 1px;
    }
    /*定義滾動條的滑塊的樣式有圓角和陰影以及自定義的背景色*/
    .overview_scroll::-webkit-scrollbar-thumb{
        border-radius: 4px;
        -webkit-box-shadow: inset 0 0 2px #00B47F;
        background: #00B47F;
    }
    /*定義滾動條所在軌道的樣式。有圓角和陰影以及淡色系的背景色*/
    .overview_scroll::-webkit-scrollbar-track{
        -webkit-box-shadow: inset 0 0 2px #E6FAF3;
        border-radius: 4px;
        background: #E6FAF3;
    }