基于pc端的滚动条插件

现在很多pc端页面会因为滚动条的占用而导致页面错乱

现在 我就给大家介绍一个好用的滚动条插件perfect-scrollbar

先上官网demo地址 http://noraesae.github.io/perfect-scrollbar/

这个插件还可以完美兼容angular.js 和 re'quire.js

首先先引入js 和css 并且确定使用滚动条插件的元素是否为定位元素。

可以使用以下两种方法 

var Ps = require('perfect-scrollbar');
var container = document.getElementById('container');
Ps.initialize(container);

$("#container").perfectScrollbar();

下面说几个常用的方法吧 

$('#container').perfectScrollbar({ ... });   // with options
$('#container').perfectScrollbar('update');  // Update
$('#container').perfectScrollbar('destroy'); // Destroy

更新，销毁，设置参数  等 下面说几个常用的参数

wheelSpeed ：默认为1（滚轮速度，试用于滚轮事件）

wheelPropagation：默认false（如果此选项为真，当滚动到达边的末尾时，触摸滚动将被传播到父元素。）

swipeEasing：默认false（如果此选项为真，滑动滚动将被缓解）

suppressScrollY：默认false（设置为真，禁止y轴滚动）

suppressScrollX：默认false（设置为真，禁止X轴滚动）

以上是一些常用的api 

下面说几个常用的 方法事件 运用事件监听的方式调用

document.addEventListener('ps-scroll-x', function () {
  // ...
})

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轴尾时触发