最近發(fā)現(xiàn)這個(gè)插件用的比較多，自己記錄下，以便自己查閱；
基本的使用方法
$ npm install perfect-scrollbar
然后在頁面引用
import PerfectScrollbar from 'perfect-scrollbar';
獲取dom節(jié)點(diǎn)，初始化scrollbar
const container = document.querySelector('#container');
const ps = new PerfectScrollbar(container);
或者
const ps = new PerfectScrollbar('#container');
ps.update() 和 ps.destroy()更新和銷毀滾動(dòng)；自己根據(jù)情況使用
下面介紹一些參數(shù)
使用方法
const ps = new PerfectScrollbar('#container', {
? wheelSpeed: 2,
? wheelPropagation: true,
? minScrollbarLength: 20
});
handlers {String[]}
它是滾動(dòng)元素的處理程序列表。
默認(rèn)值：[‘click-rail’, ‘drag-thumb’, ‘keyboard’, ‘wheel’, ‘touch’]
wheelSpeed {Number}
滾動(dòng)速度應(yīng)用于鼠標(biāo)滾輪事件。
默認(rèn)值：1
wheelPropagation {Boolean}
如果此選項(xiàng)為true，則當(dāng)滾動(dòng)到達(dá)邊的末尾時(shí)，mousewheel事件將傳播到父元素。
默認(rèn)值：false
swipeEasing {Boolean}
如果此選項(xiàng)為true，則會輕松滑動(dòng)滾動(dòng)。
默認(rèn)值：true
minScrollbarLength {Number?}
設(shè)置為整數(shù)值時(shí)，滾動(dòng)條的滑塊部分將不會縮小到該像素?cái)?shù)以下。
默認(rèn)值：null
maxScrollbarLength {Number?}
設(shè)置為整數(shù)值時(shí)，滾動(dòng)條的滑塊部分不會在該像素?cái)?shù)上展開。
默認(rèn)值：null
scrollingThreshold {Number}
這樣就設(shè)置了threashold ps–scrolling-x和ps–scrolling-y類。在默認(rèn)的CSS中，無論懸停狀態(tài)如何，它們都會顯示滾動(dòng)條。單位是毫秒。
默認(rèn)值：1000
useBothWheelAxes {Boolean}
設(shè)置為true時(shí)，只能看到一個(gè)（垂直或水平）滾動(dòng)條，則垂直和水平滾動(dòng)都會影響滾動(dòng)條。
默認(rèn)值：false
suppressScrollX {Boolean}
設(shè)置為true時(shí)，無論內(nèi)容寬度如何，X軸上的滾動(dòng)條都將不可用。
默認(rèn)值：false
suppressScrollY {Boolean}
設(shè)置為true時(shí)，無論內(nèi)容高度如何，Y軸上的滾動(dòng)條都將不可用。
默認(rèn)值：false
scrollXMarginOffset {Number}
在不啟用X軸滾動(dòng)條的情況下，內(nèi)容寬度可以超過容器寬度的像素?cái)?shù)。允許一些“擺動(dòng)空間”或“偏移中斷”，因此僅因?yàn)閹讉€(gè)像素而未啟用X軸滾動(dòng)條。
默認(rèn)值：0
scrollYMarginOffset {Number}
在不啟用Y軸滾動(dòng)條的情況下，內(nèi)容高度可以超過容器高度的像素?cái)?shù)。允許一些“擺動(dòng)空間”或“偏移中斷”，因此僅因?yàn)閹讉€(gè)像素而未啟用Y軸滾動(dòng)條。
默認(rèn)值：0
參數(shù)這么多，我也沒用過，你牛你來用；
下面是滾動(dòng)的一些事件：
基礎(chǔ)用法：
container.addEventListener （' ps-scroll-x '，（） => {? }）
ps-scroll-y
當(dāng)y軸向任一方向滾動(dòng)時(shí)，此事件將觸發(fā)。
ps-scroll-x
當(dāng)x軸向任一方向滾動(dòng)時(shí)，此事件將觸發(fā)。
ps-scroll-up
向上滾動(dòng)時(shí)會觸發(fā)此事件。
ps-scroll-down
向下滾動(dòng)時(shí)會觸發(fā)此事件。
ps-scroll-left
滾動(dòng)到左側(cè)時(shí)會觸發(fā)此事件。
ps-scroll-right
滾動(dòng)到右側(cè)時(shí)會觸發(fā)此事件。
ps-y-reach-start
滾動(dòng)到達(dá)y軸的開頭時(shí)會觸發(fā)此事件。
ps-y-reach-end
當(dāng)滾動(dòng)到達(dá)y軸的末尾時(shí)，此事件將觸發(fā)（對于無限滾動(dòng)非常有用）。
ps-x-reach-start
滾動(dòng)到達(dá)x軸的起點(diǎn)時(shí)會觸發(fā)此事件。
ps-x-reach-end
滾動(dòng)到達(dá)x軸末端時(shí)會觸發(fā)此事件。
**還可以在自己的函數(shù)中使用 ps.reach.x ,和 ps.reach.y 判斷水平和垂直的滾動(dòng)的位置；返回start和end；與自己的函數(shù)融合；
