Perfect Custom Scrollbar Component For Vue

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

Preview:

Changelog:

v1.4.3 (12/11/2020)

• Update perfect-scrollbar

v1.4.0 (10/05/2020)

• Fixed SSR support error

v1.3.0 (08/29/2020)

• update perfect-scrollbar to v1.5.0

Download Details:

Author: Binaryify

Live Demo: https://binaryify.github.io/vue-custom-scrollbar/

Download Link: https://github.com/Binaryify/vue-custom-scrollbar/archive/master.zip

Official Website: https://github.com/Binaryify/vue-custom-scrollbar

Install & Download:

# Yarn
$ yarn add vue-custom-scrollbar

# NPM
$ npm install vue-custom-scrollbar --save