怎么在css中設置滾動條的寬度

怎么在css中設置滾動條的寬度？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

什么是css

css是一種用來表現HTML或XML等文件樣式的計算機語言，主要是用來設計網頁的樣式，使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中，而樣式規則的優先級由css根據這個層次結構決定，從而實現級聯效果，發展至今，css不僅能裝飾網頁，也可以配合各種腳本對于網頁進行格式化。

在css中，可以使用“::-webkit-scrollbar”偽類選擇器和width屬性來設置設置，語法格式如下：

::-webkit-scrollbar{
width:寬度值;
}

還可以使用以下偽元素選擇器去修改各式webkit瀏覽器的滾動條樣式:

• ::-webkit-scrollbar 滾動條整體部分

• ::-webkit-scrollbar-thumb  滾動條里面的小方塊（即滾動條滑塊），能向上向下移動（或橫向滾動條可往左往右移動）

• ::-webkit-scrollbar-track  滾動條的軌道（對應上圖滾動條凹槽，里面裝有Thumb，即滾動條滑塊）

• ::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕，允許通過點擊微調小方塊的位置

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

• ::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分

• ::-webkit-resizer 兩個滾動條的交匯處上用于通過拖動調整元素大小的小控件

/*滾動條樣式*/
.cal_bottom::-webkit-scrollbar {/*滾動條整體樣式*/
        width:4px;/*高寬分別對應橫豎滾動條的尺寸*/
        height:4px;
}
.cal_bottom::-webkit-scrollbar-thumb {/*滾動條里面小方塊*/
        border-radius:5px;
        -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
        background:rgba(0,0,0,0.2);
}
.cal_bottom::-webkit-scrollbar-track {/*滾動條里面軌道*/
        -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
        border-radius:0;
        background:rgba(0,0,0,0.1);
}

實例：

1.、style部分

<style>
        /*定義滾動條樣式（高寬及背景）*/ 
        ::-webkit-scrollbar { 
            width: 6px;   /* 滾動條寬度， width：對應豎滾動條的寬度  height：對應橫滾動條的高度*/
            background: #007acc;
        } 
        /*定義滾動條軌道（凹槽）樣式*/ 
        ::-webkit-scrollbar-track { 
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);    /* 較少使用 */
            border-radius: 3px; 
        } 
        /*定義滑塊 樣式*/ 
        ::-webkit-scrollbar-thumb { 
            border-radius: 3px; 
            height: 100px;    /* 滾動條滑塊長度 */
            background-color: #ccc; 
        }
    </style>

2、body部分

<div style="height: 200px;overflow-y: scroll;background: #52cc8f;">
        11111111
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
    </div>

效果圖：

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。