Smooth Scrollbar directive for Vue.js

Smooth Scrollbar directive for Vue.js

Custom Scrollbar JavaScript Library with Smooth Scrollbar and 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

or

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


Quill Rich Text Editor component for Vue.js

Markdown Editor component for Vue.js

Simple notify handler component for Vue.js

Lightbox Photo Grid and Slideshow component for Vue.JS

Video Embed Component for Vue.JS

vue scrollbar smooth-scrollbar vue.js

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

Perfect Scrollbar directive for Vue.js

Custom Scrollbar JavaScript Library with Perfect Scrollbar and Vue.JS

10 Best Vue Icon Component For Your Vue.js App

In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.

Collection of 10 Vue Markdown Component for Vue.js App in 2020

Markdown is a way to style text on the web. The 10 Vue markdown components below will give you a clear view.

Collection of 15 Vue Input Component for Your Vue.js App

Vue input component gives you a baseline to create your own custom inputs. It consists of a prepend/append slot, messages, and a default slot. In this article I will share 15 Vue input components to you.

How to through creating a client-side Vue JS app using Vue Router

Building a Vue v2 JS app using Vue-router. Vue JS is a javascript framework which has recently released version 2. Allowing you to display, manipulate and navigate data, Vue is a React, Knockout and Angular competitor. This blog post walks through building a web app with Vue Router.