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;
}

 設置好后效果就出來了