在web開發中，滾動條是一個經常被使用到的界面組件。在 H5 和 CSS3 技術的發展中，滾動條也得到了許多的改善和優化。下面我們來看一下如何使用 H5 和 CSS3 來自定義滾動條。

1. CSS3 樣式來自定義滾動條

/*定義滾動條*/
::-webkit-scrollbar {
width: 10px;
height: 10px; 
background-color: #F5F5F5;
}
/*定義滾動條軌道*/
::-webkit-scrollbar-track {
border-radius: 5px;
background-color: #F5F5F5;
}
/*定義滾動條滑塊*/
::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: #00BCD4;
}
/*定義滾動條兩端的按鈕*/
::-webkit-scrollbar-button {
display:none;
}
/*定義滾動條的角落*/
::-webkit-scrollbar-corner {
display:none;
}

2. 使用JS插件實現自定義滾動條

// 引用插件
import 'perfect-scrollbar/css/perfect-scrollbar.css';
import PerfectScrollbar from 'perfect-scrollbar';
// 初始化
let ps = new PerfectScrollbar('#myScroll', {
wheelSpeed: 2,
wheelPropagation: true,
minScrollbarLength: 20
});
// 銷毀
ps.destroy();

以上是使用 H5 和 CSS3 技術來自定義滾動條的兩種方法。希望本文能對你有所幫助，如果有不對或者需要補充的地方，歡迎指出。