The Simplest Scroll Area Component with custom scrollbar for Vue 2. It's based on vue2-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-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>
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 Autocomplete from 'vue2-scrollbar'
// Or
var Autocomplete = require('vue2-scrollbar');
<template>
<div>
<vue-scrollbar custom-class="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.
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: [email protected]
- Skype Id: bosnaufal254
- twitter: @BosNaufal
MIT Copyright (c) 2016 - forever Naufal Rabbani