perfect-scrollbar，Vue中的滚动触发组件

最近发现这个插件用的比较多，自己记录下，以便自己查阅；
基本的使用方法

$ npm install perfect-scrollbar

然后在页面引用

import PerfectScrollbar from 'perfect-scrollbar';

获取dom节点，初始化scrollbar

const container = document.querySelector('#container');
const ps = new PerfectScrollbar(container);
 或者
const ps = new PerfectScrollbar('#container');

ps.update() 和 ps.destroy()更新和销毁滚动；自己根据情况使用
下面介绍一些参数
使用方法

const ps = new PerfectScrollbar('#container', {
  wheelSpeed: 2,
  wheelPropagation: true,
  minScrollbarLength: 20
});

1. handlers {String[]}
   它是滚动元素的处理程序列表。

2. 默认值：[‘click-rail’, ‘drag-thumb’, ‘keyboard’, ‘wheel’, ‘touch’]

3. wheelSpeed {Number}
   滚动速度应用于鼠标滚轮事件。
   默认值：1

4. wheelPropagation {Boolean}
   如果此选项为true，则当滚动到达边的末尾时，mousewheel事件将传播到父元素。
   默认值：false

5. swipeEasing {Boolean}
   如果此选项为true，则会轻松滑动滚动。
   默认值：true

6. minScrollbarLength {Number?}
   设置为整数值时，滚动条的滑块部分将不会缩小到该像素数以下。
   默认值：null

7. maxScrollbarLength {Number?}
   设置为整数值时，滚动条的滑块部分不会在该像素数上展开。
   默认值：null

8. scrollingThreshold {Number}
   这样就设置了threashold ps–scrolling-x和ps–scrolling-y类。在默认的CSS中，无论悬停状态如何，它们都会显示滚动条。单位是毫秒。
   默认值：1000

9. useBothWheelAxes {Boolean}
   设置为true时，只能看到一个（垂直或水平）滚动条，则垂直和水平滚动都会影响滚动条。
   默认值：false

10. suppressScrollX {Boolean}
    设置为true时，无论内容宽度如何，X轴上的滚动条都将不可用。
    默认值：false

11. suppressScrollY {Boolean}
    设置为true时，无论内容高度如何，Y轴上的滚动条都将不可用。
    默认值：false

12. scrollXMarginOffset {Number}
    在不启用X轴滚动条的情况下，内容宽度可以超过容器宽度的像素数。允许一些“摆动空间”或“偏移中断”，因此仅因为几个像素而未启用X轴滚动条。
    默认值：0

13. scrollYMarginOffset {Number}
    在不启用Y轴滚动条的情况下，内容高度可以超过容器高度的像素数。允许一些“摆动空间”或“偏移中断”，因此仅因为几个像素而未启用Y轴滚动条。
    默认值：0

参数这么多，我也没用过，你牛你来用；
下面是滚动的一些事件：
基础用法：

container.addEventListener （' ps-scroll-x '，（） => {  }）

ps-scroll-y
当y轴向任一方向滚动时，此事件将触发。

ps-scroll-x
当x轴向任一方向滚动时，此事件将触发。

ps-scroll-up
向上滚动时会触发此事件。

ps-scroll-down
向下滚动时会触发此事件。

ps-scroll-left
滚动到左侧时会触发此事件。

ps-scroll-right
滚动到右侧时会触发此事件。

ps-y-reach-start
滚动到达y轴的开头时会触发此事件。

ps-y-reach-end
当滚动到达y轴的末尾时，此事件将触发（对于无限滚动非常有用）。

ps-x-reach-start
滚动到达x轴的起点时会触发此事件。

ps-x-reach-end
滚动到达x轴末端时会触发此事件。

**还可以在自己的函数中使用 ps.reach.x ,和 ps.reach.y 判断水平和垂直的滚动的位置；返回start和end；与自己的函数融合；

推荐文章：perfect-scrollbar