vue-scrollbar-directive v0.0.4

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.

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.

<div class="container" v-scrollbar>
  <!-- something -->
</div>

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 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: {}
  }
}