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!.
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-scrollbarOr 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>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 ScrollBar from 'vue2-scrollbar' // Or var ScrollBar = require('vue2-scrollbar');<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>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; }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>The wheel step in pixel. The default is 53 pixel per wheel.
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>You can do some methods by accessing the component via javascript.
this.$refs.scrollbar.someMethod()To scroll the scrollbar to the Y
// Examples someMethod() { this.$refs.Scrollbar.scrollToY(100) }To scroll the scrollbar to the X
// Examples someMethod() { this.$refs.Scrollbar.scrollToX(100) }Just Contact Me At:
- Email: bosnaufalemail@gmail.com
- Skype Id: bosnaufal254
- twitter: @BosNaufal
MIT Copyright (c) 2016 - forever Naufal Rabbani