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

DEMO

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 vue-scrollbar

<template>
  <vue-scrollbar classes="my-scrollbar" v-bind:speed=100 >
    <div class="should-have-a-children scroll-me">
      <p>And Now</p>
      <p>You Can Put</p>
      <p>A Long Content Here</p>
    </div>
  </vue-scrollbar>
</template>

<script>

  import vueScrollbar from 'vue-scrollbar';

  export default {
    components: { vueScrollbar }
  };

</script>

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

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

/*The Content*/
.scroll-me{
  min-width: 750px;
}

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

Just Contact Me At:

• Email: bosnaufalemail@gmail.com
• Skype Id: bosnaufal254
• twitter: @BosNaufal

MIT Copyright (c) 2016 - forever Naufal Rabbani