Scrollable Content With Custom Scrollbar - scrollbar-live

Install & Download:

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

Description:

scrollbar-live is a Vue.js component for creating scrollable content with custom scrollbars that support server-side rendering.

How to use it:

Import the VueScrollbar from the package.

import VueScrollbar from 'vue-scrollbar-live';
import 'vue-scrollbar-live/lib/css/index.css';

Use the component.

new Vue({
    el: '#example',
    template: '<scrollbar :maxHeight="\'50vh\'"' +
    '                     :isMobile="isMobile"' +
    '                     @reachBottom="log(\'Reach bottom\')"' +
    '                     @reachTop="log(\'Reach top\')"' +
    '                     @startDrag="log(\'Drag start\')"' +
    '                     @endDrag="log(\'Drag end\')">' +
    '   <div class="content" style="width:100vw;height:100vh;" @click="log">Scroll Content</div>' +
    '</scrollbar>',
    data: function () {
      return {
        isMobile: /Android|webOS|iPhone|iPod|iPad|BlackBerry|Windows Phone/i.test(navigator.userAgent)
      }
    },
    methods: {
      log: function (e) {
        console.log(e || 1)
      }
    },
    components: { 'scrollbar': VueScrollbar }
})

Default props.

/**
 * If the env is mobile, the component use the native scrollbar
 *
 * Require
 * */
isMobile: boolean
/**
 * maxHeight of scroll wrap
 *
 * Require
 * */
maxHeight: number | string
/**
 * Set scrollLeft or scrollTop of scroll wrap
 *
 * Value range： 0 ~ 1
 * */
scrollTo?: number | ScrollData
/**
 * Set margin of the scrollbar relative to scroll wrap
 *
 * Default to 5
 * */
marginToWrap?: number

Event handlers.