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