Natural Performance Manager

    vue2-scrollbar

    0.0.3 • Public • Published

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

    Thank You for Making this useful~

    Let's talk about some projects with me

    Just Contact Me At:

    License

    MIT Copyright (c) 2016 - forever Naufal Rabbani

    Install

    npm i vue2-scrollbar

    DownloadsWeekly Downloads

    1,109

    Version

    0.0.3

    License

    MIT

    Last publish

    Collaborators

    • bosnaufal