Uses the custom instruction in VUE to realize the custom scrollbar effect.
npm install vue-scrollbar-directivenpm
npm install --save vue-scrollbar-directive
`
$3
Introduce packages in the main.js file.
You can set up the global configuration here.
`javascript
import vueScrollbarDirective from 'vue-scrollbar-directive'
Vue.use(vueScrollbarDirective)
// Vue.use(vueScrollbarDirective, global_option)
`
Add the v-scrollbar attribute to the element to use the directive.
`html
`
You can also configure it to work locally like this.
`vue
`
Here are all the configurable items:
`javascript
// default configuration
option = {
x: true, // Whether to display horizontal scroll bar
y: true, // Whether to display vertical scrollbars
width: 8, // scrollbar width
widthOnHover: 16, // scrollbar width in mouse hover
wheelDistance: 50, // Distance of Rolling Wheel Rolling Once
keep: false, // Whether to keep the display, default false, hide the scrollbar when the mouse moves out
// skidway style, use CSS Style
skidwayStyle: {
'background-color': '#F1F1F1'
},
// slider style, use CSS Style
sliderStyle: {
'background-color': '#C1C1C1'
},
// hover style
hover: {
skidwayStyle: {},
sliderStyle: {}
},
// active style
active: {
skidwayStyle: {}, // Not recommended
sliderStyle: {}
}
}
``