/*覆蓋預設滾動條樣式*/
 ::-webkit-scrollbar,scrollbar
  {   border-radius: 15px;
      width: 10px;
      height: 130px;
      background-color: #fff;
  }
  /*定義滾動條軌道 內陰影+圓角*/
 ::-webkit-scrollbar-track{
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      border-radius: 10px;
      background-color: #343084;
  }
  /*定義滑塊 內陰影+圓角*/
 ::-webkit-scrollbar-thumb{
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
      background-color: #436dc7;
      width: 10px;
      height: 130px;
  }
 

這裡要注意的是  如果你只是這麼寫 那麼 你整個頁面的滾動條都會使用這個樣式

那樣會很醜  所以 如果你想修改區域性的滾動條樣式  請在上面的css裡  新增限制  比如

 /*覆蓋預設滾動條樣式*/
 .conentleft ::-webkit-scrollbar,scrollbar
  {   border-radius: 15px;
      width: 10px;
      height: 130px;
      background-color: #fff;
  }
  /*定義滾動條軌道 內陰影+圓角*/
 .conentleft ::-webkit-scrollbar-track{
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      border-radius: 10px;
      background-color: #343084;
  }
  /*定義滑塊 內陰影+圓角*/
 .conentleft ::-webkit-scrollbar-thumb{
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
      background-color: #436dc7;
      width: 10px;
      height: 130px;
  }
 

這樣 所修改的滾動條  就只是 class=‘conentleft’裡的滾動條樣式了