Perfect Custom Scrollbar Component For Vue

Install & Download:

# Yarn
$ yarn add vue-custom-scrollbar
# NPM
$ npm install vue-custom-scrollbar --save

Description:

The minimalistic but perfect custom scrollbar component for Vue.js. Based on the perfect-scrollbar library.

How to use it:

1. Import the custom scrollbar component and its stylesheet.

import vueCustomScrollbar from 'vue-custom-scrollbar'
import "vue-custom-scrollbar/dist/vueScrollbar.css"

2. Register the component.

export default {
  components: {
    vueCustomScrollbar
  },
  // ...
}

3. Wrap your scrollable content into the custom scrollbar component.

<template>
 <div>
   <vue-custom-scrollbar class="scroll-area"  :settings="settings" @ps-scroll-y="scrollHanle">
     ...
   </vue-custom-scrollbar>
  </div>
</template>

export default {
  components: {
    vueCustomScrollbar
  },
  data() {
    return {
      settings: {
        // settings here
      }
    }
  },
  methods: {
    scrollHanle(evt) {
      console.log(evt)
    }
  }
}

4. Default component props.

settings: {
  default: null
},
swicher: {
  type: Boolean,
  default: true
},
tagname: {
  type: String,
  default: 'section'
}

5. All default scrollbar settings.

// A list of handlers to scroll the element.
handlers: ['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch'],
// This sets threshold for ps--scrolling-x and ps--scrolling-y classes to remain. In the default CSS, they make scrollbars shown regardless of hover state. The unit is millisecond.
scrollingThreshold: 1000,
// The scroll speed applied to mousewheel event.
wheelSpeed: 1,
// If true, when the scroll reaches the end of the side,
// mousewheel event will be propagated to parent element.
wheelPropagation: false,
// When set to an integer value, the thumb part of the scrollbar
// will not shrink below that number of pixels.
minScrollbarLength: null,
// When set to an integer value, the thumb part of the scrollbar
// will not expand over that number of pixels.
maxScrollbarLength: null,
// When set to true, and only one (vertical or horizontal) scrollbar
// is visible then both vertical and horizontal scrolling will affect the scrollbar.
useBothWheelAxes: false,
// When set to true, the scroll bar in X axis will not be available,
// regardless of the content width.
suppressScrollX: false,
// When set to true, the scroll bar in Y axis will not be available,
// regardless of the content height.
suppressScrollY: false,
// true: swipe scrolling will be eased
swipeEasing: true,
// The number of pixels the content width can surpass the
// container width without enabling the X axis scroll bar.
scrollXMarginOffset: 0,
// The number of pixels the content height can surpass the
// container height without enabling the Y axis scroll bar.
scrollYMarginOffset: 0