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>标签嵌套在会出现滚动内容的外面 )

 

<!-- 设置宽高而后进行配置 --> <vue-scroll :ops="ops" style="width:100%;height:100%"> 省去内容...... </vue-scroll> data中： ops: { vuescroll: {}, scrollPanel: {}, rail: { keepShow: true }, bar: { hoverStyle: true, onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条 background: "#F5F5F5",//滚动条颜色 opacity: 0.5,//滚动条透明度 "overflow-x": "hidden" } }  style中： // 滚动条位置 /deep/.__bar-is-vertical { right: -1px !important; } // 隐藏横向滚动条 /deep/.__bar-is-horizontal { display: none !important; }

 设置好后效果就出来了