Smooth Scrollbar directive for Vue.js

What is smooth-scrollbar?

Smooth Scrollbar is a JavaScript Plugin that allows you customizing high perfermance scrollbars cross browsers. It is using translate3d to perform a momentum based scrolling (aka inertial scrolling) on modern browsers. With the flexible plugin system, we can easily redesign the scrollbar as we want. This is the scrollbar plugin that you’ve ever dreamed of!

Browser Compatibility

Browser	Version
IE	10+
Chrome	22+
Firefox	16+
Safari	8+
Android Browser	4+
Chrome for Android	32+
iOS Safari	7+

Smooth Scrollbar Preview

How to use vue smooth scrollbar

npm i @morioh/v-smooth-scrollbar

yarn add @morioh/v-smooth-scrollbar

Register

import Vue from 'vue'
import ScrollBar from '@morioh/v-smooth-scrollbar'

// global register
Vue.use(ScrollBar);

or use via CDN

<script src="https://cdn.jsdelivr.net/npm/@morioh/v-smooth-scrollbar/dist/scrollbar.min.js" type="text/javascript"></script>

unpkg CDN

<script src="https://unpkg.com/@morioh/v-smooth-scrollbar/dist/scrollbar.min.js" type="text/javascript"></script>

<div v-scrollbar style="height: 500px">
  <img src="https://i.imgur.com/vIhs3zq.jpg" style="width:100%">
</div>

Common mistakes

Initialize a scrollbar without a limited width or height
Likes the native scrollbars, a scrollable area means the content insides it is larger than the container itself, for example, a 500x500 area with a content which size is 1000x1000:

              container
                 /
       +--------+
  #####################
  #    |        |     #
  #    |        |     #
  #    +--------+     # -- content
  #                   #
  #                   #
  #####################

Therefore, it’s necessary to set the width or height for the container element:

<div v-scrollbar style="max-height: 500px; max-height:500px"></div>

<div v-scrollbar style="height: 500px; height:500px"></div>

Horizontal Scrollbar

<div v-scrollbar style="width: 300px;">
  <div>
    <img style="width:500px" src="https://i.imgur.com/vIhs3zq.jpg">
  </div>

</div>

If the container element is natively scrollable before initializing the Scrollbar, it means you are on the correct way.

Smooth Scrollbar directive options

<div v-scrollbar="{}" style="height: 500px;"></div>

parameter	type	default	description
damping	`number`	`0.1`	Momentum reduction damping factor, a float value between `(0, 1)`, the lower the value is, the more smooth the scrolling will be (also the more paint frames).
thumbMinSize	`number`	`20`	Minimal size for scrollbar thumbs.
renderByPixels	`boolean`	`true`	Render every frame in integer pixel values, set to `true` to improve scrolling performance.
alwaysShowTracks	`boolean`	`false`	Keep scrollbar tracks always visible.
continuousScrolling	`boolean`	`true`	Set to `true` to allow outer scrollbars continue scrolling when current scrollbar reaches edge.
wheelEventTarget	`EventTarget`	`null`	Element to be used as a listener for mouse wheel scroll events. By default, the container element is used. This option will be useful for dealing with fixed elements.

Demo: https://lab.morioh.com/v-smooth-scrollbar/

Source Code: https://github.com/Morioh-Lab/v-smooth-scrollbar

Smooth Scrollbar: https://github.com/idiotWu/smooth-scrollbar