css滾動條樣式代碼

在webkit下的css滾動條樣式代碼是怎樣的呢？下面就讓我們一起來了解一下吧：

在現(xiàn)在的絕大部分項目中很多都會用到滾動條，有時候用會到模擬的滾動條或css滾動條，比較常見的就是css滾動條，并且在所有瀏覽器，滾動條可定制性較強的應(yīng)該是webkit內(nèi)核的瀏覽器。

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

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

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

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

4、::-webkit-scrollbar-track-piece  內(nèi)層滾動槽

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;

      }

    }

以上就是小編的分享了，希望能夠幫助到大家。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:0731-84117792 E-MAIL:11247931@qq.com