vue内容滚动，vuescroll美化滚动条

1. npm安装

npm install vuescroll -S

2. 全局引用：main.js

import VueScroll from 'vuescroll';
Vue.use(VueScroll);

3. 界面引用

<vue-scroll :ops="ops">
<div><!-- 滚动区域 --></div>
</vue-scroll>

//定义配置项
ops: {
        vuescroll: {},
        scrollPanel: {
          scrollingX: false,//关闭横向滚动
        },
        rail: {
          keepShow: true,
        },
        bar: {
          hoverStyle: true,
          onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
          background: "#efefef", //滚动条颜色
          opacity: 0.8, //滚动条透明度
        },
      },

4. 配置项文档

https://vuescrolljs.yvescoding.org/zh/guide/configuration.html#vuescroll

5. 效果图