在web開發(fā)中，滾動(dòng)條是一個(gè)經(jīng)常被使用到的界面組件。在 H5 和 CSS3 技術(shù)的發(fā)展中，滾動(dòng)條也得到了許多的改善和優(yōu)化。下面我們來看一下如何使用 H5 和 CSS3 來自定義滾動(dòng)條。

1. CSS3 樣式來自定義滾動(dòng)條

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

2. 使用JS插件實(shí)現(xiàn)自定義滾動(dòng)條

// 引用插件
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 技術(shù)來自定義滾動(dòng)條的兩種方法。希望本文能對(duì)你有所幫助，如果有不對(duì)或者需要補(bǔ)充的地方，歡迎指出。