【vue滚动条插件vuescroll】【vue自定义滚动条】

---

前言

由于浏览器自带的滚动条比较不符合设计图，所以在大部分项目中，我们都会自定义滚动条的样式，来还原设计图，让页面更加的美观。

一、使用步骤

1.下载

npm i vuescroll@^4.17.0

2.引入库

代码如下（示例）：

在main.js引入代码

import vuescroll from 'vuescroll';// 配置参数
Vue.use(vuescroll, {ops: {vuescroll: {mode: "native",detectResize: true,  //内容是否根据页面调整},bar: {showDelay: 500,onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条keepShow: false,background: '#eeeeee',opacity: 0.2,hoverStyle: false,specifyBorderRadius: false,minSize: false,size: '6px',disable: false,overflowX: 'hidden',},scrollPanel: {speed: 800,       //多长时间内完成一次滚动。 数值越小滚动的速度越快。easing: 'easeInQuad', //默认动画}},name: 'vueScroll' // 在这里自定义组件名字，默认是vueScroll
});
// 定义全局组件
Vue.component('vueScroll', vuescroll);

---

三、在组件中如何使用？

在需要自定义的组件中使用 xxx.vue

<div class="more-text-content"><vue-scroll ref="scrollNoticeDetails"><div class="details-content"><div class="details-conten-html" v-html="newsInfoObj.Content"></div></div></vue-scroll>
</div>

注意：这里父标签（.more-text-content）的高度（height）一定要有值，不然滚动条无法正常渲染。不管是通过哪种方式定义的高度，弹性布局定义的高度(flex: auto;)也可以，不一定非要写成一个死数据。

.more-text-content {width: 100%;height: 500px;overflow: auto;padding: 1.6875rem 0;box-sizing: border-box;.details-content {width: 100%;height: auto;font-size: 1rem;padding: 0 5.625rem;line-height: 1.875rem;color: #fff;box-sizing: border-box;}
}

四、跳转到顶部的方法scrollTo()

this.$refs.scrollNoticeDetails.scrollTo({y: 0,}, 50);

五、效果

总结

自定义滚动条老方便了，如有错误还请朋友们帮我补充。