3个超赞的 vue.js 自定义滚动条组件VueScrollbar

今天给小伙伴们推荐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://thub.io/OverlayScrollbars/# vue页面示例地址https://thub.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./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./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./vue-custom-scrollbar/# 仓库地址https://github.com/Binaryify/vue-custom-scrollbar

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