smooth-vuebar

Vue directive wrapper for smooth-scrollbar

Demo

You can refer to the wrapped library's demo.

Why

There are many other wrappers for this library but none of them implements the original library as directive.

I think directives are the right way to handle this kind of DOM manipulation, so let it be.

Also, there are so many problems I found while trying SSR that the only available choice for me was doing it by myself.

Install

npm i smooth-vuebar

Vue.use(SmoothVuebar)

SSR (nuxt): install as client plugin

Safari and IE: this library requires a CustomEvent polyfill.

Usage

Usually this plugin is used app-wide.

Vue

<template>
  <div>
    <div v-smoothscrollbar="{ listener, options }">
      <router-view />
    </div>
  </div>
</template>

Nuxt & Gridsome

this is a default.vue layout:

<template>
  <div>
    <div
      v-smoothscrollbar="{ listener, options }"
      @insert=".."
      @unbind="..">
      <nuxt />
    </div>
  </div>
</template>

However, you can use it where you want, just mind the default css:

.smooth-vuebar {
  max-width: 100vw;
  max-height: 100vh;
}

And replace it as you wish.

Options

The directive can be customized passing an object.

<div v-smoothscrollbar="{ listener, options }">

• listener (default: undefined) => can be a function, it will automatically set as listener.

• options (default: undefined) => can be an object.

Please refer to the offical API docs.

Events

The directive implements two extra events, useful when you want to retrieve the Scrollbar istance and use it.

• @insert - fired when the DOM element is inserted and the library is loaded on it. The callback may be a function (e).

• @unbind - fired when the DOM element is unbound and the library is unloaded. The callback may be a function (e).

Extra

You can define global default options. They are valid only if you don't set any local option.

Try it:

Vue.use(SmoothVuebar, {
  listener: () => {},
  options: {}
})

Play with the core

If you want to use the actual wrapper library, here is an helper, available in every component:

this.$scrollbar

Or project-wide

import Vue from 'vue'
 
Vue.scrollbar

Refer to offical API docs.