css控制默認滾動條樣式

針對webkit內核的瀏覽器，使用偽類來改變滾動條的默認樣式，詳情如下：

滾動條組成部分

1. ::-webkit-scrollbar 滾動條整體部分 2. ::-webkit-scrollbar-thumb 滾動條里面的小方塊，能向上向下移動（或向左向右移動） 3. ::-webkit-scrollbar-track 滾動條的軌道（里面裝有Thumb） 4. ::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕，由於通過點擊微調小方塊的位置。 5. ::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分 6. ::-webkit-scrollbar-corner 邊角，即垂直滾動條和水平滾動條相交的地方 7. ::-webkit-resizer 兩個滾動條的交匯處上用於拖動調整元素大小的小控件

滾動條樣式/顏色組成部分

scrollbar-arrow-color: #f4ae21; /*三角箭頭的顏色*/
scrollbar-face-color: #333; /*立體滾動條的顏色*/
scrollbar-3dlight-color: #666; /*立體滾動條亮邊的顏色*/
scrollbar-highlight-color: #666; /*滾動條空白部分的顏色*/
scrollbar-shadow-color: #999; /*立體滾動條陰影的顏色*/
scrollbar-darkshadow-color: #666; /*立體滾動條強陰影的顏色*/
scrollbar-track-color: #666; /*立體滾動條背景顏色*/
scrollbar-base-color:#f8f8f8; /*滾動條的基本顏色*/
Cursor:url(mouse.cur); /*自定義個性鼠標*/

如下為代碼：

 /*定義滾動條軌道*/
    #style-2::-webkit-scrollbar-track
    {
        background-color: #F5F5F5;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);
    }
    /*定義滾動條高寬及背景*/
    #style-2::-webkit-scrollbar
    {
        width: 10px;
        background-color: rgba(0, 0, 0, 0.34);
    }
    /*定義滾動條*/
    #style-2::-webkit-scrollbar-thumb
    {
        background-color: #8b8b8b;
        border-radius: 10px;
    }

*要實現單個div里面的內容滾動，需要滿足三個條件：

1、div必須設定固定的高度，不能使用百分比或 auto 等彈性值。

2、其中的內容高度必須超過它本身的高度。

3、必須添加屬性 “overflow：auto”。

 

附：

::-webkit-scrollbar{
    width: 10px;
    height: 8px;
    background-color: #515a6e;
    -webkit-transition: background-color .3s ease-in-out;
    transition: background-color .3s ease-in-out;
}
::-webkit-scrollbar:hover{
    background-color: #d1d1d1;
}
::-webkit-scrollbar-thumb{
    background-color: rgb(23, 35, 61, 0.6);
    height: 50px;
    -webkit-border-radius:5px;
    border-radius:5px;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transition: background-color .3s ease-in-out;
    transition: background-color .3s ease-in-out;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active{
    background-color:rgb(23, 35, 61, 0.8);
    border-right: 1px solid #f1f1f1;
    border-left: 1px solid #f1f1f1;
}
::-webkit-scrollbar-track{
    background-color:#fff;
}
::-webkit-scrollbar-track:hover{
    background-color:#fff;
}

 

參考鏈接：

https://css-tricks.com/custom-scrollbars-in-webkit/