Vue 2 Scrollbar

The Simplest Scroll Area Component with custom scrollbar for Vue 2. It's based on react-scrollbar. All animation, Height and Width are pure CSS, So it's TOTALLY CUSTOMIZABLE and RESPONSIVE! YEAH!.

DEMO

Install

You can import vue-scrollbar.vue to your vue component file like this and process it with your preprocessor.

You can install it via NPM

npm install vue2-scrollbar

Or Just put it after Vue JS~

<script src="https://vuejs.org/js/vue.min.js"></script> <script src="./dist/vue2-scrollbar.js"></script> <script>   // Don't Forget to register it   new Vue({     components: {       scrollbar: Vue2Scrollbar     }   }); </script>

Import Style

Don't forget to import vue 2 css. You can link it via html

<link rel="stylesheet" href="vue2-scrollbar/dist/style/vue2-scrollbar.css">

Or You can import it using commonJS

require('vue2-scrollbar/style/vue2-scrollbar.css')

Its style is very customizable. You can put any CSS over it. And You can add custom class via its prop.

Import Module

import ScrollBar from 'vue2-scrollbar' // Or var ScrollBar = require('vue2-scrollbar');

Usage

<template>   <div>     <vue-scrollbar classes="my-scrollbar" ref="Scrollbar">       <div class="scroll-me">         <div class="kolom"></div>         <div class="kolom"></div>         <div class="kolom"></div>         <div class="kolom"></div>         <div class="kolom"></div>         <div class="kolom"></div>         <div class="kolom"></div>         <div class="kolom"></div>         <div class="kolom"></div>         <div class="kolom"></div>         <div class="kolom"></div>         <div class="kolom"></div>         <div class="kolom"></div>         <div class="kolom"></div>         <div class="kolom"></div>         <div class="kolom"></div>         <div class="clearfix"></div>       </div>     </vue-scrollbar>   </div> </template>  <script>    import VueScrollbar from 'vue2-scrollbar';   require("vue2-scrollbar/style/vue2-scrollbar.css")    // It's required to set min height of the scrollbar wrapper   require("./your/custom/style/app.css")    export default {     components: { VueScrollbar },   };  </script>

Props

clasess (String)

Just the ordinary class name for styling the wrapper. So, It's TOTALLY CUSTOMIZABLE!

/*The Wrapper*/ .my-scrollbar{   width: 35%;   min-width: 300px;   max-height: 450px; }  /*The Content*/ .scroll-me{   min-width: 750px; }

style (Object)

If you prefer to use inline style to styling the scrollbar, you can pass the styling object to this props.

this.styling = {    /* Scrollbar */   scrollbar: {     width: "35%",     minWidth: "300px",     maxHeight: "450px"   },  }

<vue-scrollbar :style="styling.scrollbar"></vue-scrollbar>

speed (Number)

The wheel step in pixel. The default is 53 pixel per wheel.

onMaxScroll (type: Function, return: Object)

Applied when the scrollbar in the max vertical or max horizontal scrolling. Make a possibility to add some load more feature or infinite scroll

// Examples handleMaxScroll(direction) {   console.log(direction); }

<vue-scrollbar :onMaxScroll="handleMaxScroll"></vue-scrollbar>

Methods

You can do some methods by accessing the component via javascript.

this.$refs.scrollbar.someMethod()

scrollToY(y)

To scroll the scrollbar to the Y

// Examples someMethod() {   this.$refs.Scrollbar.scrollToY(100) }

scrollToX(x)

To scroll the scrollbar to the X

// Examples someMethod() {   this.$refs.Scrollbar.scrollToX(100) }

Pretty Scroll Area Component For Vue.js 2

Vue 2 Scrollbar

Install

Import Style

Import Module

Usage

Props

clasess (String)

style (Object)

speed (Number)

onMaxScroll (type: Function, return: Object)

Methods

scrollToY(y)

scrollToX(x)

Thank You for Making this useful~

Let's talk about some projects with me

License

You May Also Like

jQuery Plugins

AngularJs Plugins