css滾動條樣式代碼

在現在的絕大部分項目中很多都會用到滾動條，有時候用會到模擬的滾動條或css滾動條，比較常見的就是css滾動條，並且在所有瀏覽器，滾動條可定製性較強的應該是webkit內核的瀏覽器。

在webkit下面的CSS設置滾動條主要是有7個屬性，具體介紹如下：

1、::-webkit-scrollbar 滾動條整體部分，能夠設置寬度等

2、::-webkit-scrollbar-button 滾動條兩端的按鈕

3、::-webkit-scrollbar-track  外層軌道

4、::-webkit-scrollbar-track-piece  內層滾動槽

5、::-webkit-scrollbar-thumb 滾動的滑塊

6、::-webkit-scrollbar-corner 邊角

7、::-webkit-resizer 定義右下角拖動塊的樣式

參考範例：

css滾動條樣式代碼如下：

li {

      width: 260px;

      height: 370px;

      border: 1px solid #D9D9D9;

      overflow-y: scroll;

      &::-webkit-scrollbar {

        width: 3px;

      }

      &::-webkit-scrollbar-thumb {

        background: #d8d8d8;

        border-radius: 10px;

      }

      &::-webkit-scrollbar-track-piece {

        background: transparent;

      }

    }