vue-scrollbox

A Vue.js (v2.x+) component to provide scroll and observe resize.

Installation

NPM

$ npm install vue-scrollbox --save

import the script:

import VueScrollbox from 'vue-scrollbox';

Script tag

Grab the minified version under dist/vue-scrollbox.min.js It will export a global VueScrollbox variable.

Usage

Register the component globally or locally:

Vue.component('vue-scrollbox', VueScrollbox);

OR

...
components: {
  VueScrollbox
}
...

HTML

<vue-scrollbox mode="vertical" @scroll="onScroll" @resize="onResize">
  <h1>TEST</h1>
  <h1>TEST</h1>
  <h1>TEST</h1>
  <h1>TEST</h1>
</vue-scrollbox>

Props

| Name | Type | Description | | --- | --- | --- | | mode | String | Select one of the options: vertical, horizontal, auto. default: vertical | | width | Number | Fix canvas width. | | height | Number | Fix canvas height. |

Events

When the user scrolls contents scroll event will be dispatched. When viewport or canvas changed size resize event will be dispatched.

...
methods: {
  onScroll (offset) {
    console.log('onScroll', offset)
  },
  onResize (viewport, canvas) {
    console.log('onResize', viewport, canvas)
  }
}
...