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;
      }
    }

效果圖：

 

 原理解釋一波：

在所有瀏覽器，滾動條可定制性最強的當屬webkit內核的瀏覽器了。因為源代碼開放的原因，市面上基於webkit內核的瀏覽器也是很難窮舉完。例如有：Google Chrome、Opera（opera最近宣布使用webkit內核了）、360極速瀏覽器，獵豹瀏覽器等，搜狗瀏覽器······

下面我們來看一下webkit瀏覽器是如何強大的吧！首先來了解它的屬性:

滾動條的設置
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 定義右下角拖動塊的樣式

 

 

::-webkit-scrollbar ：滾動條整體部分，其中的屬性: width,height,background,border等。

::-webkit-scrollbar-button ：滾動條兩端的按鈕。可以用display:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果。

::-webkit-scrollbar-track ：外層軌道。可以用display:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果。

::-webkit-scrollbar-track-piece ：內層軌道，具體區別看下面gif圖，需要注意的就是它會覆蓋第三個屬性的樣式。

::-webkit-scrollbar-thumb ：滾動條里面可以拖動的那部分

::-webkit-scrollbar-corner ：邊角，兩個滾動條交匯處

::-webkit-resizer ：兩個滾動條交匯處用於拖動調整元素大小的小控件（基本用不上）