滚动条应用

1. 下包

npm install perfect-scrollbar --save

2.在需要添加滚动条的组件的mounted生命周期函数中，使用perfect-scrollbar初始化滚动条，代码如下：

import PerfectScrollbar from 'perfect-scrollbar'
// 引入滚动条样式
import 'perfect-scrollbar/css/perfect-scrollbar.css'

export default {
  mounted () {
    const el = document.querySelector('.scrollbar-wrapper')
    // 初始化滚动条
    new PerfectScrollbar(el)
  }
}

2. 在组件的样式中，设置需要添加滚动条的元素的高度和overflow:hidden，以隐藏浏览器自带的滚动条，代码如下：

<style>
  .scrollbar-wrapper {
    height: 500px;
    overflow: hidden;
  }
</style>

滚动时 会有点卡顿

  height: calc(100vh - 64px); /* 减去头部导航栏的高度 */
  overflow: hidden;

3. 在需要添加滚动条的元素中添加scrollbar-wrapper类名，代码如下：

<template>
  <div class="scrollbar-wrapper">
    <!-- 需要添加滚动条的内容 -->
  </div>
</template>