滚动条: vue-perfect-scrollbar

一、安装npm install vue-perfect-scrollbar

cmd进入项目根目录，执行如下命令:

cnpm install vue-perfect-scrollbar

二、新建scrollbar.vue文件

1、引入

import VuePerfectScrollbar from 'vue-perfect-scrollbar/index.vue'

2、注册

components: {
    VuePerfectScrollbar
  },

3、使用

<VuePerfectScrollbar class="scroll">
      <div class="box">
        <p>323232232</p>
        <p>323232232</p>
        <p>323232232</p>
        <p>323232232</p>
        <p>323232232</p>
        <p>323232232</p>
      </div>
    </VuePerfectScrollbar>

代码如下：

<template>
  <div class="father">
    <VuePerfectScrollbar class="scroll">
      <div class="box">
        <p>323232232</p>
        <p>323232232</p>
        <p>323232232</p>
        <p>323232232</p>
        <p>323232232</p>
        <p>323232232</p>
      </div>
    </VuePerfectScrollbar>
  </div>
</template>

<script>
import VuePerfectScrollbar from 'vue-perfect-scrollbar'
export default {
  name: "scrollbar",
  components: {
    VuePerfectScrollbar
  },
  data () {
    return {}
  },

}
</script>

<style scoped>
/* 父系一个高度 */
.father {
  width: 200px;
  height: 100%;
}
/* 滚动条一个高度 */
.scroll {
  height: 200px;
}
</style>

三、配置路由

在router/index.js中配置如下：

{
    path: '/scrollbar',
    name: 'scrollbar',
    component: () => import(/* webpackChunkName: "about" */ '../views/scrollbar.vue')
  }

在App.vue中

<router-link to="/scrollbar">scrollbar</router-link>

四、启动项目

效果如下：