简单页面中使用

html

<div class="container">
  <div>342424242</div>
</div>

css

<style lang="">
  .container{position: relative;width:200px;height: 200px;overflow: hidden;}
  .container div{width:1000px;height: 1000px;background-color: #ccc;}
</style>

js

<script src="js/jquery.js"></script>
<script src="js/perfect-scrollbar.jquery.js"></script>
<script src="js/perfect-scrollbar.js"></script>
<script>
  $('.container').perfectScrollbar();
</script>

其他的调用方法

1.销毁:$('.container').perfectScrollbar('destroy');
2.滚动到某一特定位置:$('.container').scrollTop(0);$('.container').perfectScrollbar('update');

项目中使用

模块下载

$npm install perfect-scrollbar

html

<link rel="stylesheet" href="dist/css/perfect-scrollbar.css" />
<style>
  #container {
    position: relative;
    height: 100%; /* Or whatever you want (e.g. 400px) */
  }
</style>

引用

const Ps = require('perfect-scrollbar');
import * as Ps from 'perfect-scrollbar';

const container = document.querySelector('#container');
Ps.initialize(container, {
  wheelSpeed: 2,
  wheelPropagation: true,
  minScrollbarLength: 20
});

其他调用方法

Ps.update(container);
Ps.destroy(container);
container.scrollTop = 0;
其余API参考github;