perfect-scrollbar 使用方法

  前言

　官网：https://github.com/mdbootstrap/perfect-scrollbar#scrollingthreshold-number

　对于前端开发人员，在编写页面时总是会遇到添加滚动条的需求，但是浏览器自带的滚动条样式又过于......嗯，所以我们就会自己手动修改它的样式，手动修改随之而来的就是各种浏览器不兼容的问题，整的你一个头两个大，没错，我就被坑过。所以此刻我们无比需要一个能兼容所有浏览器又能修改样式的工具，它就是我们的完美滚动条（perfect-scrollbar）。

　perfect-scrollbar 是极简但完美的（对于我们，也许对于大多数开发人员）滚动条插件。

• 设计布局没有变化
• 没有对 DOM 树的操作
• 使用普通 scrollTop和 scrollLeft
• 滚动条样式是完全可定制的
• 布局更改的有效更新

 

  使用

　接下来我们来看看它在 vue 中的使用

• 下载安装  npm install perfect-scrollbar 

　下载成功后你的 package.json 里面就会此依赖

　　　　

• 配置

　　在你的 main.js 里面引入

　　

•  组件中使用

　　组件中引入：

　　

 　　给滚动条的区域添加 id :

　　

 　　滚动条的父元素添加下面样式：

　　

 　  一定要注意添加滚动条的区域要添加：

　　

　　js 部分需要及时销毁：

　　 let projectListDOM = null;
    let projectListPs = null;
    onMounted(()=>{
      projectListDOM = document.querySelector('#project_body_scroll .ant-table-body');
      projectListPs = new PerfectScrollbar(projectListDOM);
    });
    onBeforeUnmount(()=>{
      if (projectListPs) {
        projectListPs.destroy();
        projectListPs = null;
      }
      projectListDOM = null;
    });