一些愛折騰的個人網站的站長會嫌棄瀏覽器原始的滾動條不好看,會想方設法的將瀏覽器的滾動條進行個性化的自定義,而 CSS3 就提供了 -webkit-scrollbar 屬性來自定義瀏覽器滾動條的樣式。

CSS3 的 -webkit-scrollbar 屬性只支持 webkit 內核瀏覽器的滾動條設置,它可以對擁有 overflow 隱藏屬性的元素區域以及列表框,下拉菜單,textarea元素中的滾動條進行樣式的自定義,

滾動條件的組成部份:

国产视频app下面是滾動條組成部份的顯示圖:

CSS3自定義滾動條樣式

1. ::-webkit-scrollbar 滾動條整體部分

国产视频app2. ::-webkit-scrollbar-thumb 滾動條里面的小方塊,能向上向下移動(或向左向右移動)

3. ::-webkit-scrollbar-track 滾動條的軌道(里面裝有Thumb)

国产视频app4. ::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕,由于通過點擊微調小方塊的位置。

国产视频app5. ::-webkit-scrollbar-track-piece 內層軌道,滾動條中間部分

6. ::-webkit-scrollbar-corner 邊角,即垂直滾動條和水平滾動條相交的地方

国产视频app7. ::-webkit-resizer 兩個滾動條的交匯處上用于拖動調整元素大小的小控件

簡單的自定義滾動條樣式

html完整代碼

你可以將下面的代碼復制到本地的HTML文件中去

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS3自定義滾動條-飛鳥慕魚博客</title>
    <style>
    .scrollbar{
        margin-left: 30px;
        float: left;
        height: 300px;
        width: 65px;
        background: #F5F5F5;
        overflow-y: scroll;
        margin-bottom: 25px;
    }
    .force-overflow{
        min-height: 450px;
    }
    #wrapper{
        text-align: center;
        width: 500px;
        margin: auto;
    }
    /*定義滾動條軌道*/
    #style-1::-webkit-scrollbar-track{
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
    }
    /*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/
    #style-1::-webkit-scrollbar{
        width: 12px;
        background-color: #F5F5F5;
    }
    /*定義滑塊的樣式*/
    #style-1::-webkit-scrollbar-thumb{
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #555;
    }
    #style-2::-webkit-scrollbar-track{
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
    }
    #style-2::-webkit-scrollbar{
        width: 12px;
        background-color: #F5F5F5;
    }
    #style-2::-webkit-scrollbar-thumb{
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #D62929;
    }
    #style-3::-webkit-scrollbar-track{
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color: #F5F5F5;
    }
    #style-3::-webkit-scrollbar{
        width: 6px;
        background-color: #F5F5F5;
    }
    #style-3::-webkit-scrollbar-thumb{
        background-color: #000000;
    }
    #style-4::-webkit-scrollbar-track{
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color: #F5F5F5;
    }
    #style-4::-webkit-scrollbar{
        width: 10px;
        background-color: #F5F5F5;
    }
    #style-4::-webkit-scrollbar-thumb
    {
        background-color: #0ae;
        background-image: -webkit-gradient(linear, 0 0, 0 100%,color-stop(.5, rgba(255, 255, 255, .2)),color-stop(.5, transparent), to(transparent));
    }
    </style>
</head>
<body>
<div id="wrapper">
        <div id="style-default">
            <div></div>
        </div>
        <div id="style-1">
            <div></div>
        </div>
        <div id="style-2">
            <div></div>
        </div>
        <div id="style-3">
            <div></div>
        </div>
        <div id="style-4">
            <div></div>
        </div>
</div>
</body>
</html>

滾動條的高級設置

滾動條的自定義就是利用偽元素與偽類來進行的!

關于偽類大家最熟悉的應該就是 :link、:focus、:hover,除此之外 CSS3 中又給增加了許多偽類選擇器,如 :nth-child、:last-child、:nth-last-of-type() 等。

国产视频appCSS中偽元素有 :first-line、:first-letter、:before、:after。而在CSS3中,偽元素進行了調整和升級,就是在以前的基礎上增加了一個“:”也就是現在變成了“::first-letter、::first-line、::before、::after”,另外CSS3還增加了一個“::selection”。兩個“::”和一個“:”在css3中主要用來區分偽類和偽元素。

国产视频appwebkit內核的瀏覽器對偽類和偽元素的支持性是很強大的,我們可以把滾動條當成一個頁面元素來定義,再結合一些高級的CSS3屬性,比如漸變、圓角等等。

下面的偽類可以應用到上面的偽元素中,進行各種高級復雜的設置。

:horizontal  
//horizontal偽類適用于任何水平方向上的滾動條  
  
:vertical  
//vertical偽類適用于任何垂直方向的滾動條  
  
:decrement  
//decrement偽類適用于按鈕和軌道碎片。表示遞減的按鈕或軌道碎片,例如可以使區域向上或者向右移動的區域和按鈕  
  
:increment  
//increment偽類適用于按鈕和軌道碎片。表示遞增的按鈕或軌道碎片,例如可以使區域向下或者向左移動的區域和按鈕  
  
:start  
//start偽類適用于按鈕和軌道碎片。表示對象(按鈕 軌道碎片)是否放在滑塊的前面  
  
:end  
//end偽類適用于按鈕和軌道碎片。表示對象(按鈕 軌道碎片)是否放在滑塊的后面  
  
:double-button  
//double-button偽類適用于按鈕和軌道碎片。判斷軌道結束的位置是否是一對按鈕。也就是軌道碎片緊挨著一對在一起的按鈕。  
  
:single-button  
//single-button偽類適用于按鈕和軌道碎片。判斷軌道結束的位置是否是一個按鈕。也就是軌道碎片緊挨著一個單獨的按鈕。  
  
:no-button  
no-button偽類表示軌道結束的位置沒有按鈕。  
  
:corner-present  
//corner-present偽類表示滾動條的角落是否存在。  
  
:window-inactive  
//適用于所有滾動條,表示包含滾動條的區域,焦點不在該窗口的時候。  
::-webkit-scrollbar-track-piece:start {  
/*滾動條上半邊或左半邊*/  
}  
::-webkit-scrollbar-thumb:window-inactive {  
/*當焦點不在當前區域滑塊的狀態*/  
}  
::-webkit-scrollbar-button:horizontal:decrement:hover {  
/*當鼠標在水平滾動條下面的按鈕上的狀態*/  
}

示例代碼:

請將代碼復制到本地,保存為 HTML 文件后進行查看

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS3自定義滾動條</title>
    <style>
    *{margin: 0;padding: 0;}
    #container{
        width: 100%;
        height: 1200px;
        line-height: 600px;
        text-align: center;
        background: #ccc;
    }
    /*定義滾動條的高寬*/
    ::-webkit-scrollbar {
        width: 16px;
        height: 16px;
    }
    /*顯示滾動條上方的漸增按鈕*/
    ::-webkit-scrollbar-button:start:decrement,
    /*顯示滾動條上方的漸減按鈕*/
    ::-webkit-scrollbar-button:end:increment {
        display: block;
    }
    /*隱藏滾動條上方的漸增按鈕*/
    ::-webkit-scrollbar-button:vertical:start:increment,
    ::-webkit-scrollbar-button:vertical:end:decrement {
        display: none;
    }
    /* 定義滾動條漸增按扭的樣式 */
    ::-webkit-scrollbar-button:end:increment {
        background-color: rgb(83, 6, 184);
    }
    /* 定義滾動條漸減按扭的樣式 */
    ::-webkit-scrollbar-button:start:decrement {
        background-color: rgb(224, 10, 189);
    }
    /* 垂直滾動條的滑動塊 */
    ::-webkit-scrollbar-thumb:vertical {
        height: 56px;
        background-color: brown;
    }
    /* 垂直滾動條的第三層軌道的上段 */
    ::-webkit-scrollbar-track-piece:vertical:start {
        background-color: aqua;
    }
    /* 垂直滾動條的第三層軌道的下段 */
    ::-webkit-scrollbar-track-piece:vertical:end {
        background-color: rgb(204, 218, 12);
    }
    </style>
</head>
<body>
    <div id="container">CSS3自定義滾動條<br/>飛鳥慕魚博客</div>
</body>
</html>