❤New Prague, Minnesota

npm

JoinLog In
Need private packages and team management tools?Check out npm Orgs. »

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

Keywords

install

npm i vue2-scrollbar

Downloadsweekly downloads

1,833

version

0.0.3

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar

Test with RunKit

Report a vulnerability