當網頁內容過長時，滾動條往往是用戶用來瀏覽頁面內容的工具之一。然而，原生的滾動條卻常常無法滿足設計師的要求，此時就需要使用 CSS 來自定義增長滾動條。

/*添加滾動條*/
.element::-webkit-scrollbar{
width: 6px;
}
/*滾動條背景樣式*/
.element::-webkit-scrollbar-track{
background-color: #F5F5F5;
}
/*滾動條thumb樣式*/
.element::-webkit-scrollbar-thumb{
background-color: #888;
border-radius: 6px;
}
/*鼠標移動到滾動條上時的樣式*/
.element::-webkit-scrollbar-thumb:hover{
background-color: #555;
}

上述代碼通過 ::-webkit-scrollbar 選擇器來選中滾動條，然后分別使用 scrollbar-width 和 scrollbar-color 屬性設置滾動條的寬度和顏色。通過 background-color 設置滾動條的背景顏色。通過 border-radius 屬性設置圓角滾動條。

了解了如何使用 CSS 自定義滾動條，讀者們可以根據自己的需求自由發揮，設計出自己風格的滾動條，提高用戶體驗。