當(dāng)內(nèi)容超出容器時易桃，容器會出現(xiàn)滾動條褥琐，其自帶的滾動條有時無法滿足我們審美要求，那么我們可以通過css偽類來實(shí)現(xiàn)對滾動條的自定義

來自：DIV 自定義滾動條樣式

滾動條的css樣式主要有三部分組成

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

下面以overflow-y:auto;為例（overflow-x:auto同）

html

<div class="test test-1">
  <div class="scrollbar"></div>
</div>

css

  .test{
    width: 50px;
    height: 200px;
    overflow: auto;
    float: left;
    margin: 5px;
    border: none;
  }

  .scrollbar{
    width: 30px;
    height: 300px;
    margin: 0 auto;
  }

   /*滾動條整體樣式*/
  .test-1::-webkit-scrollbar {
   /*高寬分別對應(yīng)橫豎滾動條的尺寸*/
    width: 10px;     
    height: 1px;
  }

  /*滾動條里面小方塊*/
  .test-1::-webkit-scrollbar-thumb {
    border-radius: 10px;
   -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #535353;
  }
  
  /*滾動條里面軌道*/
  .test-1::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    background: #EDEDED;
  }

效果如下如：

a. 改變滾動條的寬度：在::-webkit-scrollbar中改變即可晤郑；
b. 改變滾動條滑塊的圓角敌呈，在::-webkit-scrollbar-thumb 中改變；
c. 改軌道的圓角在::-webkit-scrollbar-track中改變造寝；

此外磕洪，滾動條的滑塊不僅可以填充顏色還可以填充圖片如下

html

<div class="test test-5">
  <div class="scrollbar"></div>
</div>

css

/*滾動條整體樣式*/
.test-5::-webkit-scrollbar {
  width: 10px;     
  height: 1px;
}
/*滾動條里面小方塊*/
.test-5::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #F90;
  background-image: 
    -webkit-linear-gradient(
      45deg, 
      rgba(255, 255, 255, .2) 25%, 
      transparent 25%, 
      transparent 50%, 
      rgba(255, 255, 255, .2) 50%, 
      rgba(255, 255, 255, .2) 75%, 
      transparent 75%, 
      transparent
    );
  }
/*滾動條里面軌道*/
.test-5::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  /*border-radius: 10px;*/
  background: #EDEDED;
}

效果如下

以上就可以做出自己喜歡的滾動條了

如果文檔中會有多個滾動條出現(xiàn)，而且希望所有的滾動條樣式是一樣的诫龙，那么偽元素前面不需要加上class析显、id、標(biāo)簽名等之類的任何東西赐稽。