首页 > 其他 > 详细

vue更改默认滚动条样式

时间:2020-01-15 13:41:57      阅读:675      评论:0      收藏:0      [点我收藏+]

快过年了。。。

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

 设置好后效果就出来了

技术分享图片

vue更改默认滚动条样式

原文:https://www.cnblogs.com/home-/p/12195761.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!