如何自定義CSS滾動條的樣式？

時間 2019-11-10

標籤如何自定義 css 滾動條樣式欄目 CSS 简体版

原文原文鏈接

歡迎你們前往騰訊雲+社區，獲取更多騰訊海量技術實踐乾貨哦~css

本文由前端林子發表html

本文會介紹CSS滾動條選擇器，並在demo中展現如何在Webkit內核瀏覽器和IE瀏覽器中，自定義一個橫向以及一個縱向的滾動條。前端

0.需求

有的時候咱們不想使用瀏覽器默認的滾動條樣式，由於不夠定製化和美觀。那麼如何自定義滾動條的樣式呢？下面一塊兒來看看吧。web

1 基礎知識

1.1 Webkit內核的css滾動條選擇器

::-webkit-scrollbar CSS僞類選擇器影響了一個元素的滾動條的樣式chrome

屬性：瀏覽器

::-webkit-scrollbar — 整個滾動條ui

::-webkit-scrollbar-track — 滾動條軌道url

::-webkit-scrollbar-thumb — 滾動條上的滾動滑塊spa

::-webkit-scrollbar-button — 滾動條上的按鈕 (上下箭頭)3d

::-webkit-scrollbar-track-piece — 滾動條沒有滑塊的軌道部分

::-webkit-scrollbar-corner — 邊角，即當同時有垂直滾動條和水平滾動條時交匯的部分

::-webkit-resizer — 某些元素的corner部分的部分樣式(例:textarea的可拖動按鈕)

注意：

(1)瀏覽器的支持狀況：

::-webkit-scrollbar 僅僅在支持Webkit的瀏覽器 (Chrome, Safari)能夠使用。

(2)可設置豎直/水平方向的滾動條

能夠設置水平方向的滾動條(:horizontal)，不加默認是豎直方向(:vertical)。

(3)滾動條上的按鈕（:decrement、:increment）

能夠設置圖片，這點會在下面demo中展現。

1.2 IE自定義滾動條樣式

可自定義的樣式比較少，只能控制滾動條各個部分顯示的顏色，定製性較低。這裏我只列舉了部分樣式，諸如scrollbar-3dlight-color、scrollbar-highlight-color等樣式試了下沒有效果，這裏再也不列出：

scrollbar-arrow-color — 滾動條三角箭頭的顏色 scrollbar-face-color — 滾動條上滾動滑塊顏色

scrollbar-track-color— 滾動條軌道、按鈕背景的顏色 scrollbar-shadow-color— 滾動框上滑塊邊框的顏色

2.demo快速上手

2.1 Webkit內核的瀏覽器自定義滾動條樣式 (chrome, safari)

若是以爲上述說明有些抽象，能夠直接在瀏覽器中打開demo，結合demo中的註釋來理解各個屬性的意義。圖中我對其中的一些屬性作了標註，滾動條外層軌道屬性並未在圖中標註，可打開chrome瀏覽器控制檯查看屬性：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>scrollbar的demo--lynnshen</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    .scolltable {
      width: 500px;
      height: 300px;
      border: 1px solid black;
      
      /*實現水平垂直居中*/
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -250px;
      margin-top: -150px;

      overflow: scroll;
    }

    .content {
      /*要設的比.scolltable更寬一些*/
      width: 600px;
    }

    /*整個滾動條*/

    ::-webkit-scrollbar {
      width: 24px;
      background-color: transparent;
    }

    /*水平的整個滾動條*/

    ::-webkit-scrollbar:horizontal {
      height: 24px;
      background-color: transparent;
    }

    /*滾動條軌道*/

    ::-webkit-scrollbar-track {
      background-color: #f6f8fc;
      border-right: 1px solid #f1f5fa;
      border: 1px solid #f1f5fa;
      ;
    }

    /*豎直的滑塊*/

    ::-webkit-scrollbar-thumb {
      background-color: rgba(220, 228, 243, 1);
      border-radius: 0px;
      border-top: 1px solid #edf2f9;
      border-bottom: 1px solid #edf2f9;
      border-left: 1px solid #f1f5fa;
    }

    /*水平的滑塊*/

    ::-webkit-scrollbar-thumb:horizontal {
      /* background-color: rgba(220, 228, 243, 1); */
      border-radius: 0px;
      border-top: 1px solid #edf2f9;
      /* border-right: 1px solid #f1f5fa;
      border-left: 1px solid #f1f5fa; */
    }

    /*滾動條上的按鈕--豎直滾動條向上*/

    ::-webkit-scrollbar-button:decrement {
      border-bottom: 1px solid #edf2f9;
      height: 26px;
      background: url("./images/scroll_up.png") 7px 9px no-repeat;
      border-right: 1px solid #f1f5fa;
      border-left: 1px solid #f1f5fa;
    }

    /*滾動條上的按鈕--豎直滾動條向下*/

    ::-webkit-scrollbar-button:increment {
      border-top: 1px solid #edf2f9;
      height: 26px;
      background: url("./images/scroll_down.png") 7px 10px no-repeat;
      border-right: 1px solid #f1f5fa;
      border-left: 1px solid #f1f5fa;
      border-bottom: 1px solid #f1f5fa;
    }

    /*滾動條上的按鈕--水平滾動條向左*/

    ::-webkit-scrollbar-button:horizontal:decrement {
      border-top: 1px solid #edf2f9;
      width: 26px;
      background: url("./images/scroll_left.png") 9px 7px no-repeat;
      border-top: 1px solid #f1f5fa;
      border-bottom: 1px solid #f1f5fa;
      border-right:1px solid #f1f5fa;
    }

    /*滾動條上的按鈕--水平滾動條向右*/

    ::-webkit-scrollbar-button:horizontal:increment {
      border-top: 1px solid #edf2f9;
      width: 25px;
      background: url("./images/scroll_right.png") 10px 7px no-repeat;
      border-left:1px solid #f1f5fa;
    }
    
    /*邊角*/
    ::-webkit-scrollbar-corner{
      border:1px solid #dce4f3;
    }
  </style>
  
</head>

<body>
  <div class="scolltable">
    <div class="content">
      內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
      內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
      內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
      內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
    </div>
  </div>
</body>

</html>

實現效果：

WebKit內核的瀏覽器

說明：

(1)滾動條兩端的按鈕使用的圖片，四個角分別使用了四張圖片;

(2).scolltable實現了水平垂直居中的效果，具體方法是：使用絕對對位，將元素的定點定位到body的中心。而後使用負margin（即元素寬高的一半）將其拉回到body的中心。

2.2 IE自定義滾動條樣式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>scrollbar for IE--lynnshen</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    .scolltable {
      width: 500px;
      height: 300px;
      border: 1px solid black;
      
      /*實現水平垂直居中*/
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -250px;
      margin-top: -150px;

      overflow: scroll;
      
      scrollbar-face-color:greenyellow;
      scrollbar-arrow-color:goldenrod;
      scrollbar-shadow-color:red;
      scrollbar-track-color:pink;
    }

    .content {
      /*要設的比.scolltable更寬一些*/
      width: 600px;
    }
    
  </style>
  
</head>

<body>
  <div class="scolltable">
    <div class="content">
      內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
      內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
      內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
      內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
    </div>
  </div>
</body>

</html>

實現效果：