技術標籤：javascriptcsshtmlhtml5css3

自定義滾動條樣式

自定義滾動條樣式

```css
/* 全域性滾動條樣式統一 */
::-webkit-scrollbar {
    width: 10px; /*滾動條寬度*/
    height: 10px; /*滾動條高度*/
}
/*定義滾動條軌道 內陰影+圓角*/
::-webkit-scrollbar-track {
    box-shadow: 0px 1px 3px transparent inset; /*滾動條的背景區域的內陰影*/
    border-radius: 10px; /*滾動條的背景區域的圓角*/
    background-color: transparent; /*滾動條的背景顏色*/
}
/*定義滑塊 內陰影+圓角*/
::-webkit-scrollbar-thumb {
    box-shadow: 0px 1px 3px rgba(144,147,153,.3) inset; /*滾動條的內陰影*/
    border-radius: 10px; /*滾動條的圓角*/
    background-color: rgba(144,147,153,.3); /*滾動條的背景顏色*/
}
 

根據自己的需求可以自定義滾動條樣式