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.

onScroll (type: Function, return: Object)

Applied when the scrollbar is scrolling. Allows you to react to any scroll events.

// Examples
handleScroll(position) {
  console.log(position);
}

<vue-scrollbar :onScroll="handleScroll"></vue-scrollbar>

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)
}

Thank You for Making this useful~

Let's talk about some projects with me

Just Contact Me At:

• Email: [email protected]
• Skype Id: bosnaufal254
• twitter: @BosNaufal

License

MIT Copyright (c) 2016 - forever Naufal Rabbani