The Simplest Scroll Area Component with custom scrollbar for Vue 2
npm install vue2-scrollbarThe 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 install it via NPM
``bash`
npm install vue2-scrollbar
Or Just put it after Vue JS~
`html`
html
`Or You can import it using commonJS
javascript
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
javascript
import ScrollBar from 'vue2-scrollbar'
// Or
var ScrollBar = require('vue2-scrollbar');
`
Usage
html
`
Props
##### clasess (String)
Just the ordinary class name for styling the wrapper. So, It's TOTALLY CUSTOMIZABLE!
css
/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.
javascript
this.styling = { / Scrollbar /
scrollbar: {
width: "35%",
minWidth: "300px",
maxHeight: "450px"
},
}
`html
`##### 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
javascript
// Examples
handleMaxScroll(direction) {
console.log(direction);
}
`
html
`Methods
You can do some methods by accessing the component via javascript.
javascript
this.$refs.scrollbar.someMethod()
`##### scrollToY(y)
To scroll the scrollbar to the Y
javascript
// Examples
someMethod() {
this.$refs.Scrollbar.scrollToY(100)
}
`##### scrollToX(x)
To scroll the scrollbar to the X
javascript
// Examples
someMethod() {
this.$refs.Scrollbar.scrollToX(100)
}
``