webkit內核瀏覽器自定義滾動條樣式

時間 2019-11-08

原文原文鏈接

CSS
::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

以上CSS代碼所管轄的區域對就關係：以上註釋中的數字與下圖中數字相對應。css

上圖正如以下所言：html

::-webkit-scrollbar 滾動條總體部分，其中的屬性有width,height,background,border（就和一個塊級元素同樣）等。web
::-webkit-scrollbar-button 滾動條兩端的按鈕。能夠用display:none讓其不顯示，也能夠添加背景圖片，顏色改變顯示效果。.net
::-webkit-scrollbar-track 外層軌道。能夠用display:none讓其不顯示，也能夠添加背景圖片，顏色改變顯示效果。code
::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分（除去）。htm
::-webkit-scrollbar-thumb 滾動條裏面能夠拖動的那部分blog
::-webkit-scrollbar-corner 邊角圖片
::-webkit-resizer 定義右下角拖動塊的樣式get

注意：對以上各個部分定義width,height時。有以下功能：如果水平滾動條，則width屬性不起做用，height屬性用來控制滾動條相應部分豎直方向高度；如果豎直滾動條，則height屬性不起做用，width屬性用來控制相應部分的寬度。對::-webkit-scrollbar-button 相反。it

demo:

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style type="text/css">        
        #test::-webkit-scrollbar {
            width: 13px;
            height: 13px;
            background-color: gray;
        }
        #test::-webkit-scrollbar-button {
            width: 13px;
            height: 13px;
            background-color: gray;
        }
        #test::-webkit-scrollbar-track {           
            background-color: gray;
        }
        #test::-webkit-scrollbar-track-piece {           
            background-color: #dedede;
            border-radius: 5px;
        }
        #test::-webkit-scrollbar-thumb {          
            background-color: #23211b;
            border-radius: 5px;
        }
        #test::-webkit-scrollbar-corner {          
            background-color: green;
        }
        #test::-webkit-resizer {       
            background-color: green;
        }
        div.scroll{
            margin: 20px auto;
            height: 100px;
            width: 100px;
            overflow: auto;
            background-color: red;
        }
        div.scroll div{
            width: 150px;
        }
    </style>
</head>
<body>

    <div id="test" class="scroll">
        <div>發的廣東省大地飛歌收到合肥讀後感發的廣東省大地飛歌收到合肥讀後感發的廣東省大地飛歌收到合肥讀後感發的廣東省大地飛歌收到合肥讀後感發的廣東省大地飛歌收到合肥讀後感發的廣東省大地飛歌收到合肥讀後感發的廣東省大地飛歌收到合肥讀後感
        </div>
    </div>

    <div class="scroll">
        <div>發的廣東省大地飛歌收到合肥讀後感發的廣東省大地飛歌收到合肥讀後感發的廣東省大地飛歌收到合肥讀後感發的廣東省大地飛歌收到合肥讀後感發的廣東省大地飛歌收到合肥讀後感發的廣東省大地飛歌收到合肥讀後感發的廣東省大地飛歌收到合肥讀後感
        </div>
    </div>
</body>
</html>

來源： https://www.lyblog.net/detail...