今天给小伙伴们推荐3款超美观高效的Vue自定义滚动条组件Vue-Scrollbar。

1、OverlayScrollbars

overlayscrollbars 一款优秀高质量的自定义滚动条插件，star高达1.4K+。支持跨框架使用 (js vue react angular)，兼容IE8+及主流浏览器。

在jQuery中使用

<link type="text/css" href="path/OverlayScrollbars.css" />
<script src="path/jquery.js"></script>
<script src="path/jquery.overlayScrollbars.js"></script>

$(function() {
  $('body').overlayScrollbars({ });
});

在Vue页面中使用

// 安装依赖
$ npm i overlayscrollbars-vue -S

// 在main.js中全局引入
import Vue from 'vue';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
Vue.component('overlay-scrollbars', OverlayScrollbarsComponent);

// 页面局部引入
<script>
import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
export default {
  components: {
    'overlay-scrollbars': OverlayScrollbarsComponent
  }
}
</script>

// 在页面模板中使用
<template>
  <overlay-scrollbars 
    :options="{ scrollbars: { autoHide: 'scroll' } }" 
    :extensions="['extensionA', 'extensionB']"
  >
  example content
  </overlay-scrollbars>
</template>

# 官网地址
https://kingsora.github.io/OverlayScrollbars/

# vue页面示例地址
https://kingsora.github.io/OverlayScrollbars/frameworks/vue/

# 仓库地址
https://github.com/KingSora/OverlayScrollbars

2、Vuebar

vuebar 基于 vue.js 构建的自定义滚动条组件。丰富的参数配置及支持自定义样式。

安装

$ npm i vuebar -S

使用插件

// 全局引入
import Vue from 'vue';
import Vuebar from 'vuebar';
Vue.use(Vuebar);

// 基本使用
<div v-bar>
  <div>your scrollable content</div>
</div>

// 配置参数
<div v-bar="{
  preventParentScroll: true,
  scrollThrottle: 30,
}">
  <div>your scrollable content</div>
</div>

# 文档地址
https://github.serafin.io/vuebar/

# 仓库地址
https://github.com/DominikSerafin/vuebar

3、Vue-Custom-ScrollBar

vue-custom-scrollbar 一款基于 Vue.js 简约完美的自定义滚动条组件。易于使用，支持自定义滚动条样式。

特点

• 不改变设计布局
• 不需要手动操作 DOM
• 使用普通的 scrollTop and scrollLeft
• 滚动条样式可完全自定义
• 布局更改后更新

安装

$ npm i vue-custom-scrollbar -S

使用插件

<template>
  <div>
    <vue-custom-scrollbar class="scroll-area" :settings="settings" @ps-scroll-y="scrollHanle">
      <img src="http://utatti.github.io/perfect-scrollbar/azusa.jpg" height="720" width="1280" />
    </vue-custom-scrollbar>
  </div>
</template>
<script>
import vueCustomScrollbar from 'vue-custom-scrollbar'
export default {
  components: {
    vueCustomScrollbar
  },
  data() {
    return {
      settings: {
        maxScrollbarLength: 60
      }
    }
  },
  methods: {
    scrollHanle(evt) {
      console.log(evt)
    }
  }
}
</script>
<style >
.scroll-area {
  position: relative;
  margin: auto;
  width: 600px;
  height: 400px;
}
</style>

# 文档地址
https://binaryify.github.io/vue-custom-scrollbar/

# 仓库地址
https://github.com/Binaryify/vue-custom-scrollbar

ok，就分享到这里。如果大家有其它好的Vue滚动条组件，欢迎一起分享交流哈！