vue-scrollbar-directive
. Uses the custom instruction in VUE to realize the custom scrollbar effect.Now open testing!
Install package
npm install --save vue-scrollbar-directive
Start using!
Introduce packages in the main.js
file.
You can set up the global configuration here.
Vue// Vue.use(vueScrollbarDirective, global_option)
Add the v-scrollbar
attribute to the element to use the directive.
<!-- something -->
You can also configure it to work locally like this.
<template> <div class="demoVue"> <div class="container" v-scrollbar="option"> <!-- something --> </div> </div></template> <script>export default { data () { return { option: { skidwayStyle: { 'background-color': 'rgba(40, 44, 52, .1)', 'border-radius': '8px' }, sliderStyle: { 'background-color': 'rgba(97, 163, 191, 1)', 'border-radius': '8px' } } } }}</script> <style>// style</style>
Here are all the configurable items:
// default configurationoption = 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: {}