• 核心代碼：

       ::-webkit-scrollbar{ /*滾動(dòng)條整體樣式*/
            height: 9px !important; /*高寬分別對(duì)應(yīng)橫豎滾動(dòng)條的尺寸*/
            width: 9px !important;
        }

        ::-webkit-scrollbar-thumb { /*滾動(dòng)條里面小方塊*/
            border-radius: 0;
            border-style: dashed;
            background-color: rgba(157, 165, 183, 0.4);
            border-color: transparent;
            border-width: 1.5px;
            background-clip: padding-box;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: rgba(157, 165, 183, 0.7)
        }

::-webkit-scrollbar-track { /*滾動(dòng)條里面軌道*/
  -webkit-box-shadow: inset 0 0 5px rgba(240, 240, 240, 0) ;
  border-radius: 0 ;
  // background: rgba(240, 240, 240, 0.5) ;
  background: rgba(240, 240, 240, 0) ;
  cursor: pointer ;
}

• 自定義滾動(dòng)條的寬度

// 自定義滾動(dòng)條樣式，有必要的話可以完善這個(gè)樣式進(jìn)行使用。
.y-scrollbar-width-7 {
  ::-webkit-scrollbar { /*滾動(dòng)條整體樣式*/
    width: 12px ; /*高寬分別對(duì)應(yīng)橫豎滾動(dòng)條的尺寸*/
    height: 12px ;
  }
  ::-webkit-scrollbar-thumb { /*滾動(dòng)條里面小方塊*/
    border-width: 2.5px;
  }
}

參考：
https://blog.csdn.net/dKnightL/article/details/88317356