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;
    });