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: [email protected]
- Skype Id: bosnaufal254
- twitter: @BosNaufal
MIT Copyright (c) 2016 - forever Naufal Rabbani
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent