Package Exports

vue2-scrollbar-fork

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue2-scrollbar-fork) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 custom-class="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.

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

JSPM

vue2-scrollbar-fork