vue更改默认滚动条样式

vue更改默认滚动条样式用的是 vuescroll
安装模块

npm install vuescroll

main.js中引入：

import vuescroll from "vuescroll";//引入vuescroll
import "vuescroll/dist/vuescroll.css";//引入vuescroll样式
Vue.use(vuescroll);//使用

使用：( <vue-scroll></vue-scroll>标签嵌套在会出现滚动内容的外面 )

data：

//vue滚动条设置参数
      ops: {
        vuescroll: {},
        scrollPanel: {
          initialScrollY: 0, //只要组件mounted之后自动滚动的距离。 例如 100 or 10%
          initialScrollX: 0,
          scrollingX: true, //是否启用 x 或者 y 方向上的滚动
          scrollingY: true
        },
        rail: {
          keepShow: true
        },
        bar: {
          hoverStyle: true,
          onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
          background: "#1890FF", //滚动条颜色
          opacity: 0.5, //滚动条透明度
          "overflow-x": "hidden"
        }
      },

html：

设置宽高，超出出现滚动条

 <vue-scroll :ops="ops" style="width:100%;height: 147px;">
        <ul class="standardUl">
          <li>
            <i class="iconfont">&#xe842;</i>
            <span v-text="standardMsg"></span>
          </li>
        </ul>
</vue-scroll>

css：

// 滚动条位置
/deep/.__bar-is-vertical {
  right: -1px !important;
}
// 隐藏横向滚动条
/deep/.__bar-is-horizontal {
  display: none !important;
}

效果：

api：https://vuescrolljs.yvescoding.org/zh/guide/event.html#handle-scroll