光年模板说明文档
主题
字号
18px

perfect-scrollbar滚动条

插件使用perfect-scrollbar v1.4.0版本，主要用在侧边栏的垂直滚动上。

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

文档地址：https://mdbootstrap.com/freebies/perfect-scrollbar/

插件使用起来很简单，下面看下v3的滚动条初始化：

const ps = new PerfectScrollbar('.lyear-layout-sidebar-scroll', {
    swipeEasing: false,
    suppressScrollX: true
});

当然你需要给 lyear-layout-sidebar-scroll 指定高度。

在v4的版本里，考虑到插件使用的方便性，对初始化做了如下的调整：

if($('.lyear-scroll')[0]) {
    $('.lyear-scroll').each(function(){
        new PerfectScrollbar(this, {
            swipeEasing: false,
            suppressScrollX: true
        });
    });
}

这样写的原因是为了能够让滚动条变成一个通用的，当你的 div 或者其他元素需要滚动条，你可以直接给当前元素一个 class="lyear-scroll"，在光年模板中，你可能会注意到，顶部的消息点击后的下拉 div ，就是这样使用的。

你需要注意的是：iframe-v4版本中这个初始化代码是写在index.min.js中，如果你想在子页面使用，可将这个代码放一份到main.min.js中，并且在子页面中引入js/perfect-scrollbar.min.js。

涉及的文件：