The Simplest Scroll Area Component with custom scrollbar for Vue Js. https://bosnaufal.github.io/vue-scrollbar/
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets/img First Release May 8, 2016
build MAKE IT RESPONSIVE! May 10, 2016
src improve compat: replace require with sass import Sep 29, 2016
LICENSE
README.md MAKE IT RESPONSIVE! May 10, 2016
index.html First Release May 8, 2016
package.json 1.0.3 May 9, 2016
webpack.config.js First Release May 8, 2016

README.md

Vue Scrollbar

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

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

Usage

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

Props

clasess (String)

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;
}
speed (Number)

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

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