The Simplest Scroll Area Component with custom scrollbar for Vue 2
npm install vue2-scrollbar-forkbash
npm install vue2-scrollbar
`
Or Just put it after Vue JS~
`html
`
Import Style
Don't forget to import vue 2 css. You can link it via 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.
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)
}
``