JQuery简约而强大的自定义滚动条插件Perfect Scrollbar

简介

Perfect Scrollbar 是一款简约而又完美的JQuery自定义滚动条插件。也就是说，Perfect Scrollbar 是一个简约轻量的 jQuery 插件，能够帮助你轻松创建出自定义风格的滚动条。它不会影响默认的布局，也不需要任何任何的 CSS 修改，该插件适用于任何大小的容器，并重新安排位置，如果容器大小发生变化会自动调整位置。此外，滚动条的风格可以完全通过 CSS 定制。

插件特定：

无需对默认元素有任何更改

滚动条不应影响默认设计布局

滚动条的设计应（几乎）完全可定制

若容器或内容大小发生变化，则滚动条的大小和位置应自动调整

（下载的附件中附有）

使用

1.  引入文件

<script src="dist/perfect-scrollbar.js"></script>

2.  HTML

<style>
  #container {position: relative;width: 600px;height: 400px;}
</style>

<link rel="stylesheet" href="css/perfect-scrollbar.css">

3.  调用

初试化

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

// or just with selector stringconst
ps = new PerfectScrollbar('#container');

还可以使用options初试化

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

相关链接

官方文档（英文）：https://perfectscrollbar.com/?utm_source=GitHub&utm_medium=PerfectScrollbar

GitHub 地址 ：https://github.com/yanxlg/perfect-scrollbar