perfect-scrollbar.js 是一款自定义滚动条js插件-BFW插件库

perfect-scrollbar.js 是一款自定义滚动条js插件

主要特性：
不需要修改任何的元素的css
滚动条不影响最初的页面布局设计
滚动条支持完整的自定义
滚动条的尺寸和位置会随着容器尺寸或者内容的变化而变化
依赖于jQuery和相关几个类库
不需要定义宽度和高度。它会固定在容器的右下
你可以修改任何滚动条的样式，不依赖于其它脚本
滚动条支持'update'方法。如果你需要修改滚动条的位置和大小，只需要调用这个方法即可
不使用'scrollTop'和'scrollLeft'，不是用任何绝对定位
使用要求：
必须有一个内容元素
容器必须拥有一个'position'的CSS样式定义
滚动条的position必须是'absolute'
scrollbar-x必须拥有一个bottom的样式定义，scrollbar-必须有一个'right'的样式定义

<style>
  #container {
    position: relative;
    width: 600px;
    height: 400px;
  }
</style>
<link rel="stylesheet" href="css/perfect-scrollbar.css">

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

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

第一步引入bfwone

第二步执行插件

示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script  type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["perfect-scrollbar", "perfect-scrollbar"], function() {
                const ps = new PerfectScrollbar('#Demo');
            });
        });
    </script>
    <style>
        #Demo {
            position: relative;
            margin: 0px auto;
            padding: 0px;
            width: 600px;
            height: 400px;
            overflow: hidden;
        }
        #Demo .content {
            background: #666;
            width: 1280px;
            height: 720px;
            padding: 10px;
            color: #fff
        }

    </style>

</head>
<body>
    <div id='Demo'>
        <div class='content'>
            <p>
                不需要修改任何的元素的css
                滚动条不影响最初的页面布局设计
                滚动条支持完整的自定义
                滚动条的尺寸和位置会随着容器尺寸或者内容的变化而变化
                依赖于jQuery和相关几个类库
                不需要定义宽度和高度。它会固定在容器的右下
                你可以修改任何滚动条的样式，不依赖于其它脚本
                滚动条支持'update'方法。如果你需要修改滚动条的位置和大小，只需要调用这个方法即可
                不使用'scrollTop'和'scrollLeft'，不是用任何绝对定位
            </p>
        </div>
    </div>


</body>
</html>

官方地址 https://github.com/mdbootstrap/perfect-scrollbar