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;    /* 修復交匯時出現的白塊 */
    }
 

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

然後當資料量多的時候，流量器預設生成的滾動條就採用了上邊的樣式渲染，而不再是預設那樣的了。