div內容超過實現滾動條以及設置滾動條屬性【CSS實現】

例如，有一個id叫做mleft的div，當內容超過他原本的高度或者寬度，出現滾動條。

一般默認的滾動條太難看，此時我們要自定義樣式

div的基本css:

#mleft{
    width:200px;
    height:500px;
    float:left;
    background-color:rgb(0,191,255);
    overflow:auto;/*當內容超過，出現滾動條*/
 }

滾動條的css【以下對應的選擇器都要有才行】

#mleft::-webkit-scrollbar{/*滾動條整體*/
width:10px;
}
#mleft::-webkit-scrollbar-track{/*滾動條軌道*/
background:#999;
border-radius:2px;
}
#mleft::-webkit-scrollbar-thumb{/*滾動條里面的滑塊*/
background:white;
border-radius:10px;
}
#mleft::-webkit-scrollbar-thumb:hover{/*滾動條鼠標事件，鼠標放上去出現的事件*/
background:#333;
}
#mleft::-webkit-scrollbar-corner{/*滾動條邊角*/
background:#179a16;
}

注意：滾動條對應的所有選擇器：

::-webkit-scrollbar       /*滾動條整體*/

::-webkit-scrollbar-thumb   /*滾動條里面的滑塊*/

::-webkit-scrollbar-track    /*滾動條的軌道*/

::-webkit-scrollbar-button  /*滾動條軌道兩端按鈕*/

::-webkit-scrollbar-track-piece /*內層軌道，軌道條中間部分(除去)*/

::-webkit-scrollbar-corner   /*滾動條邊角*/

::-webkit-resizer /*定義右下角拖動塊的樣式*/

注意：以上內容來源於百度經驗，已經過驗證【原內容地址:https://jingyan.baidu.com/article/6079ad0e32752d68fe86db29.html】
學習后的思考：

滾動條能否變成進度條呢？顯然是可以的，自己滾動滾動條就會發現，通過一定的樣式設置，使用css+js完全可以結合，當數據加載/下載的量多，進度條滑塊自己就減小，如此，滑塊變長，就做到了。