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!.
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~
Import Style
Don't forget to import vue 2 css. You can link it via html
Or You can import it using commonJS
Its style is very customizable. You can put any CSS over it. And You can add custom class via its prop.
Import Module
// Orvar ScrollBar = ;
Usage
Props
clasess (String)
Just the ordinary class name for styling the wrapper. So, It's TOTALLY CUSTOMIZABLE!
/*The Wrapper*/ /*The Content*/
style (Object)
If you prefer to use inline style to styling the scrollbar, you can pass the styling object to this props.
thisstyling = /* Scrollbar */ scrollbar: width: "35%" minWidth: "300px" maxHeight: "450px"
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 { console;}
Methods
You can do some methods by accessing the component via javascript.
this$refsscrollbar
scrollToY(y)
To scroll the scrollbar to the Y
// Examples { this$refsScrollbar}
scrollToX(x)
To scroll the scrollbar to the X
// Examples { this$refsScrollbar}
Thank You for Making this useful~
Let's talk about some projects with me
Just Contact Me At:
- Email: bosnaufalemail@gmail.com
- Skype Id: bosnaufal254
- twitter: @BosNaufal
License
MIT Copyright (c) 2016 - forever Naufal Rabbani