perfect-scrollbar是一款輕量級的滾動插件，具體介紹[詳見其官網](https://github.com/utatti/perfect-scrollbar) 你只需要知道它絕對不是為了vue設計的，和vue沒半毛錢關系。那么如何完美的融合其中呢？ 以下是我的步驟 首先，安裝包 ~~~ npm?install?perfect-scrollbar?--save ~~~ 其次，引入包。為了能夠在項目中信手拈來的使用而不是每個要用的組件都去引入一遍，我們應該在主入口引入并注冊為自定義指令。 ~~~ //main.js //引入核心框架 import Vue from 'vue'; //插件的包 import PerfectScrollbar from 'perfect-scrollbar'; //對應的css import "perfect-scrollbar/css/perfect-scrollbar.css"; /** * @description 自動判斷該更新PerfectScrollbar還是創建它 * @param {HTMLElement} el - 必填。dom元素 */ const el_scrollBar = (el) => { //在元素上加點私貨，名字隨便取，確保不會和已有屬性重復即可，我取名叫做_ps_ if (el._ps_ instanceof PerfectScrollbar) { el._ps_.update(); } else { //el上掛一份屬性 el._ps_ = new PerfectScrollbar(el, { suppressScrollX: true }); } }; //接著，自定義Vue指令,指令名你自己隨便編一個，我們假定它叫scrollBar Vue.directive("scrollBar", { //使用inserted鉤子函數（初次創建dom）獲取使用自定義指令處的dom inserted(el, binding, vnode) { //判斷其樣式是否存在position 并且position為"fixed", "absolute"或"relative" //如果不符合條件，拋個錯誤。當然你也可以拋個警告然順便給其position自動加上"relative" //為什么要這么做呢，因為PerfectScrollbar實現原理就是對dom注入兩個div，一個是x軸一個是y軸，他們兩的position都是absolute。 //對css稍有常識的人都知道，absolute是相對于所有父節點里設置了position屬性的最近的一個節點來定位的，為了能夠正確定位，我們要給其設置position屬性 const rules = ["fixed", "absolute", "relative"]; if (!rules.includes(window.getComputedStyle(el, null).position)) { console.error(`perfect-scrollbar所在的容器的position屬性必須是以下之一：${rules.join("、")}`) } //el上掛一份屬性 el_scrollBar(el); }, //更新dom的時候 componentUpdated(el, binding, vnode, oldVnode) { try { //vnode.context其實就是vue實例，這里其實無需實例也直接用Vue的靜態方法 //故而也可以寫成Vue.nextTick vnode.context.$nextTick( () => { el_scrollBar(el); } ) } catch (error) { console.error(error); el_scrollBar(el); } } }) ~~~ 至此，我們完成了PerfectScrollbar在vue的準備工作 接下來我們試試如何調用。 用法相當簡單，在要用到的地方直接寫一個v-scrollBar ~~~ //具體組件 <template> <div class="container"> <ul class="list" v-scrollBar> <li>巴拉巴拉</li> <li>炫光舞法</li> <!--想想這里有一堆li--> <li>天舞臺</li> </ul> </div> </template> <style lang="less" scoped> .list{ position:relative; /*不寫高度說明高度自適應，既然高度都無限了根本就不會出現滾動條*/ height:300px; } </style> ~~~ 是不是很簡單，只要在要用到滾動條的那個ul上面加一個v-scrollBar即可，其余什么都不用操心。 最后，還要注意一下兼容性 據[perfect-scrollbar官網](http://utatti.github.io/perfect-scrollbar/)描述。它對ie的支持僅完美支持ie11，然后ie10勉強能用 那么vue是支持到ie9的。我們至少要讓他在ie9上能用 那么現在的這個狀態直接在ie9上試試。應該會得到一個類似于 Uncaught TypeError: Cannot read property 'add' of undefined 的報錯。 那么我們打開perfect-scrollbar的源碼看看  有.add的地方就這兩處 都是classList的方法 那么classList是什么，參見[mdn](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/classList) ie9上沒有對其實現，所以我們掛一個對其的墊片 再來安裝一個包 ~~~ npm?install?classlist-polyfill?--save ~~~ 然后在引入perfect-scrollbar包之前（其實在它被實例化之前就行）引入它 ~~~ //main.js 頭部引包部分改一下 //引入核心框架 import Vue from 'vue'; //classList的墊片 import "classlist-polyfill"; //插件的包 import PerfectScrollbar from 'perfect-scrollbar'; //對應的css import "perfect-scrollbar/css/perfect-scrollbar.css"; ~~~ 至此大功告成