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;
}
设置好后效果就出来了
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步