Vue使用vue2-perfect-scrollbar滚动条

官方地址：https://github.com/mercs600/vue2-perfect-scrollbar

下载：

cnpm i -S vue2-perfect-scrollbar

main.js中引用：

1.  
   import PerfectScrollbar from 'vue2-perfect-scrollbar'
2.  
   import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css'
3.  
   Vue.use(PerfectScrollbar)

使用：

1.  
   <template>
2.  
   <div class="aside">
3.  
   <div class="aside-header">
4.  
   <img
5.  
   src="https://lj-common.oss-cn-chengdu.aliyuncs.com/vue.png"
6.  
   style="width: 30px; height: 30px"
7.  
   />
8.  
   <span
9.  
   style="
10.  
    font-size: 20px;
11.  
    font-weight: 600;
12.  
    color: white;
13.  
    margin-left: 10px;
14.  
    "
15.  
    >xxx</span
16.  
    >
17.  
    </div>
18.  
    <div class="aside-menu">
19.  
    <perfect-scrollbar @ps-scroll-y="onScroll" ref="scrollbar">
20.  
    <el-menu
21.  
    default-active="1"
22.  
    class="el-menu-vertical-demo"
23.  
    background-color="#191A23"
24.  
    text-color="#fff"
25.  
    active-text-color="white"
26.  
    >
27.  
    <el-menu-item index="1" @click="$router.push({ path: '/download' })">
28.  
    <span slot="title">demo</span>
29.  
    </el-menu-item>
30.  
     
31.  
    <el-menu-item index="3"> <span slot="title">test</span> </el-menu-item
32.  
    ><el-menu-item index="3">
33.  
    <span slot="title">test</span>
34.  
    </el-menu-item>
35.  
    <el-menu-item index="3"> <span slot="title">test</span> </el-menu-item
36.  
    ><el-menu-item index="3">
37.  
    <span slot="title">test</span> </el-menu-item
38.  
    ><el-menu-item index="3">
39.  
    <span slot="title">test</span> </el-menu-item
40.  
    ><el-menu-item index="3">
41.  
    <span slot="title">test</span> </el-menu-item
42.  
    ><el-menu-item index="3">
43.  
    <span slot="title">test</span> </el-menu-item
44.  
    ><el-menu-item index="3">
45.  
    <span slot="title">test</span> </el-menu-item
46.  
    ><el-menu-item index="3">
47.  
    <span slot="title">test</span> </el-menu-item
48.  
    ><el-menu-item index="3">
49.  
    <span slot="title">test</span> </el-menu-item
50.  
    ><el-menu-item index="3">
51.  
    <span slot="title">test</span> </el-menu-item
52.  
    ><el-menu-item index="3">
53.  
    <span slot="title">test</span> </el-menu-item
54.  
    ><el-menu-item index="3">
55.  
    <span slot="title">test</span> </el-menu-item
56.  
    ><el-menu-item index="3">
57.  
    <span slot="title">test</span> </el-menu-item
58.  
    ><el-menu-item index="3">
59.  
    <span slot="title">test</span> </el-menu-item
60.  
    ><el-menu-item index="3">
61.  
    <span slot="title">test</span> </el-menu-item
62.  
    ><el-menu-item index="3">
63.  
    <span slot="title">test</span> </el-menu-item
64.  
    ><el-menu-item index="3">
65.  
    <span slot="title">test</span> </el-menu-item
66.  
    ><el-menu-item index="3">
67.  
    <span slot="title">test</span> </el-menu-item
68.  
    ><el-menu-item index="3">
69.  
    <span slot="title">test</span> </el-menu-item
70.  
    ><el-menu-item index="3">
71.  
    <span slot="title">test</span> </el-menu-item
72.  
    ><el-menu-item index="3">
73.  
    <span slot="title">test</span> </el-menu-item
74.  
    ><el-menu-item index="3">
75.  
    <span slot="title">test</span> </el-menu-item
76.  
    ><el-menu-item index="3">
77.  
    <span slot="title">test</span> </el-menu-item
78.  
    ><el-menu-item index="3">
79.  
    <span slot="title">test</span> </el-menu-item
80.  
    ><el-menu-item index="3">
81.  
    <span slot="title">test</span> </el-menu-item
82.  
    ><el-menu-item index="3">
83.  
    <span slot="title">test</span> </el-menu-item
84.  
    ><el-menu-item index="3">
85.  
    <span slot="title">test</span>
86.  
    </el-menu-item>
87.  
    <el-menu-item index="2" @click="$router.push({ path: '/test' })">
88.  
    <span slot="title">test1</span>
89.  
    </el-menu-item>
90.  
    </el-menu>
91.  
    </perfect-scrollbar>
92.  
    </div>
93.  
    </div>
94.  
    </template>
95.  
    <script>
96.  
    export default {
97.  
    data() {
98.  
    return {};
99.  
    },
100.  
     methods: {
101.  
     onScroll(event) {
102.  
     console.log(this.$refs.scrollbar.ps, event);
103.  
     },
104.  
     },
105.  
     watch: {
106.  
     //路由改变时，滚动条回到顶部
107.  
     $route() {
108.  
     this.$refs.scrollbar.$el.scrollTop = 0;
109.  
     },
110.  
     },
111.  
     };
112.  
     </script>
113.  
      
114.  
      
115.  
     <style lang='scss' scoped>
116.  
     .aside {
117.  
     height: 100vh;
118.  
     .aside-header {
119.  
     height: 60px;
120.  
     background-color: #545c64;
121.  
     line-height: 60px;
122.  
     display: flex;
123.  
     align-items: center;
124.  
     justify-content: center;
125.  
     }
126.  
     .aside-menu {
127.  
     height: calc(100vh - 60px);
128.  
     background-color: #0b6dd0;
129.  
     //展开时宽度
130.  
     .el-menu-vertical-demo:not(.el-menu--collapse) {
131.  
     width: 256px;
132.  
     }
133.  
     .el-menu {
134.  
     height: 100%;
135.  
     border: 0 !important; //垂直时，去除右侧白边
136.  
     }
137.  
     //perfect-scrollbar默认的类名。自定义滚动条内容区域高度
138.  
     .ps {
139.  
     height: 100%;
140.  
     }
141.  
     }
142.  
     }
143.  
     </style>

这篇好文章是转载于：学新通技术网