## vue 滚动条组件对比
由于项目中需要使用到滚动区域，且要求滚动区域可以设置最大高度，并要求支持谷歌和IE浏览器。
在使用了以下几款滚动条后针对他们的情况记录他们的优缺点
```
一、vue-custom-scrollbar
这是一款自定义的滚动插件，基于perfect-scrollbar库。适用于PC端
1) 安装：vue-custom-scrollbar
2) 局部使用
import vueCustomScrollbar from "vue-custom-scrollbar";
import "vue-custom-scrollbar/dist/vueScrollbar.css";
components: {
vueCustomScrollbar
},
3) 优点： 使用简单方便。可自定义max-height使之生效。
缺点：当浏览器窗口较小使窗口处于可以滚动的状态，在滚动组件区域内的鼠标无法控制窗口左右滑动。
4) 范例
*html：
<vue-custom-scrollbar class="scroll-area" :settings="settings">
<ul>
<li v-for="item in 200" :key="item">vueCustomScrollbar {{ item }}</li>
</ul>
</vue-custom-scrollbar>
*data
settings: {
suppressScrollY: false,
suppressScrollX: false,
wheelPropagation: false
}
*css
.scroll-area {
margin: auto;
600px;
min-height: 200px;
max-height: 400px;
background: burlywood;
}
5）npm地址：https://www.npmjs.com/package/vue-scrollbar-custom
二、overlayscrollbars
OverlayScrollbars是一个javascript滚动条插件，可隐藏本机滚动条，提供自定义样式的叠加滚动条，并保留本机功能和感觉。
1）安装： npm install overlayscrollbars
在vue中使用的话还需安装 npm install overlayscrollbars-vue
2）在main.js做全局配置
import OverlayScrollbars from "overlayscrollbars";
import { OverlayScrollbarsPlugin } from "overlayscrollbars-vue";
import "overlayscrollbars/css/OverlayScrollbars.css";
3）优点：配置较多，滚动流畅，支持max-height的设置。
缺点：相对测试的几款滚动组件来说，在配置上属于复杂的一款。在IE上会报错（语法错误），还没解决。
4）范例
*html
<overlay-scrollbars
ref="osComponentRef"
:sizeAutoCapable="false"
:autoUpdate="true"
:resize="setResize"
:class="osclass"
>
<ul>
<li v-for="item in 100" :key="item">{{ '登录签到第' + item + '天' }}</li>
</ul>
</overlay-scrollbars>
*data
options: {},
osclass: 'os-style',
setResize: 'both',
*mounted
mounted() {
let obj = this.$refs.osComponentRef;
let that = this;
this.options = {
callbacks: {
onScroll: function() {
let positionY = obj.osInstance().scroll().position.y; //内容滚动的距离
let maxY = obj.osInstance().scroll().max.y; //内容的高度
if (positionY == maxY) {//滚动条滚动到底部
console.log('已经到底部了')
}
}
}
};
}
*css
.os-style{
max- 400px;
max-height: 400px;
overflow-x: scroll;
background: cadetblue;
}
5）npm地址：https://www.npmjs.com/package/overlayscrollbars
三、vue-gemini-scrollbar
基于gemini-scrollbar封装的vue组件。基于原生滚动的自定义滚动条。支持IE9+。
1) 安装 npm install vue-gemini-scrollbar
2) 在main.js中配置
import GeminiScrollbar from 'vue-gemini-scrollbar';
Vue.use(GeminiScrollbar);
3）优点：使用简单方便,区域滚动流畅。
缺点：不支持max-height设置，需要固定区域高度。
4）范例
*html
<GeminiScrollbar class="my-scroll-bar">
<ul>
<li v-for="item in 100" :key="item">今天是第 {{ item }} 天，天气晴朗！！！</li>
</ul>
</GeminiScrollbar>
*css
.my-scroll-bar{
background: darkgray;
200px;
height: 400px;
}
5)npm地址：https://www.npmjs.com/package/vue-gemini-scrollbar/v/2.0.0
四、vuebar
Vuebar是一个具有原生Scoll行为的可定制滚动条，轻量、性能高、可自定义且没有依赖性。通过v-bar指令生成滚动区域，且需要对滚动条进行样式设置。
1)安装：npm install vuebar –save
2）在main.js中配置
import Vuebar from ‘vuebar’;
Vue.use(Vuebar);
3)优点：通过指令使div变成滚动区域。
缺点：需要添加滚动条样式才能生效。滚动条在位移时略有卡顿，流畅度不明显。
4）范例:https://blog.csdn.net/qq_26390047/article/details/76789540
5)npm地址：http://github.serafin.io/vuebar/
五、ElementUI的隐藏滚动条
1）安装：npm install element-ui
2) 在main.js中配置
import ElementUI from 'element-ui';
import '../static/css/element-ui.css';
3）优点：使用简单,样式比较小巧。
缺点：在官网组件中并没有将其暴露，是一个隐藏组件,需要自己看源码进行调用。多次使用固定代码占用篇幅较大。
4）范例
*html
<div ref="scrollRef" class="data-scrolle">
<el-scrollbar
class="default-scrollbar srcoll-bar-init"
wrap-class="default-scrollbar__wrap"
view-class="default-scrollbar__view"
>
<ul>
<li v-for="item in 200" :key="item">vueCustomScrollbar {{ item }}</li>
</ul>
</el-scrollbar>
</div>
*css
.data-scrolle{
300px;
max-height: 400px;
background: darkorange;
/deep/.default-scrollbar__view{
max-height: 300px;
}
}
5）npm地址:https://element.eleme.cn/#/zh-CN/component/installation
```
如果还有其他vue的滚动插件，欢迎小伙伴们留言。这里只是介绍了此次测试的几款，不足之处，烦请谅解。
针对此次遇到的问题，若是解决了会有相应的更新，当然，如果有小伙伴遇到相同的问题并且已经解决的也可以提供一下解决方法或思路。谢谢(*^__^*)