CSS修改滾動條的樣式

修改某個div的滾動條

/*修改某個div的滾動條樣式*/
div::-webkit-scrollbar{
  width:5px;
  height:5px;
  /**/
}
div::-webkit-scrollbar-track{
  background: #fff;
  border-radius:2px;
}
div::-webkit-scrollbar-thumb{
  background: #444;
  border-radius:10px;
}
div::-webkit-scrollbar-thumb:hover{
  background: #999;
}
div::-webkit-scrollbar-corner{
  background: #204754;
}

有一些相應的參數，可以根據自己的需要設置：
::-webkit-scrollbar 滾動條整體部分
::-webkit-scrollbar-thumb 滾動條里面的小方塊，能向上向下移動（或往左往右移動，取決於是垂直滾動條還是水平滾動條）
::-webkit-scrollbar-track 滾動條的軌道（里面裝有Thumb）
::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕，允許通過點擊微調小方塊的位置。
::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分（除去）
::-webkit-scrollbar-corner 邊角，即兩個滾動條的交匯處
::-webkit-resizer 兩個滾動條的交匯處上用於通過拖動調整元素大小的小控件

修改瀏覽器默認的滾動條樣式

在很多時候我們需要修改瀏覽器默認的滾動條樣式，因為他太寬，太丑了。

/* 整個滾動條 */
    ::-webkit-scrollbar {
      width: 3px;
      height: 3px;
    }
 
    /* 滾動條有滑塊的軌道部分 */
    ::-webkit-scrollbar-track-piece {
      background-color: transparent;
      border-radius: 5px;
    }
 
    /* 滾動條滑塊(豎向:vertical 橫向:horizontal) */
    ::-webkit-scrollbar-thumb {
      cursor: pointer;
      background-color:#f2f2f2;
      border-radius: 5px;
    }
 
    /* 滾動條滑塊hover */
    ::-webkit-scrollbar-thumb:hover {
      background-color: #999999;
    }
 
    /* 同時有垂直和水平滾動條時交匯的部分 */
    ::-webkit-scrollbar-corner {
      display: block;    /* 修復交匯時出現的白塊 */
    }

然后有一個屬性和上邊是一樣的，可以自己根據需要添加修改。

然后當數據量多的時候，流量器默認生成的滾動條就采用了上邊的樣式渲染，而不再是默認那樣的了。