Scrollable Content With Custom Scrollbar – scrollbar-live

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.

  • @wrapClick: fired on click
  • @reachBottom: fired when the scrollbar reach the bottom of the content
  • @reachTop: fired when the scrollbar reach the top of the content
  • @reachLeft: fired when the scrollbar reach the left of the content
  • @reachRight: fired when the scrollbar reach the right of the content
  • @startDrag: fired when you drag the scrollbar
  • @endDrag: fired when drag ends

Download Details:

Author: livelybone

Live Demo: https://livelybone.github.io/vue/vue-scrollbar-live/

Download Link: https://github.com/livelybone/vue-scrollbar-live/archive/master.zip

Official Website: https://github.com/livelybone/vue-scrollbar-live

Last Update: September 9, 2019

Install:

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

You Might Be Interested In:

Tags:

Add Comment