vue-scroll

scroll directive for vuejs 2.0

For vue 1.x, please use vue-scroll@1.0.4. Currently its code is in master branch.

Installation

NPM(recommended)

npm install vue-scroll --save

Standalone

Standalone bundle is not support on latest v2.1.0 currently

Simple download from releases and include it in script tag.

Get started

import Vue from 'vue'
import vuescroll from 'vue-scroll'
 
Vue.use(vuescroll)

Directive v-scroll then can be used in any of your Component.

<template>
  <ul v-scroll="onScroll">
    <li></li>
  </ul>
</template>
...

Method onScroll receives two arguments once scroll event is fired,

• e - event
• position - Object contains scrolling data
  • scrollTop Number
  • scrollLeft Number

Advanced

throttle and debounce are supported since v2.1.0, you can enable it as global configurations like:

Vue.use(vuescroll, {throttle: 600})
//Or
Vue.use(vuescroll, {debounce: 600})

Override global configurations like

<ul v-scroll:throttle="{fn: onScroll, throttle: 500 }">

<ul v-scroll:debounce="{fn: onScroll, debounce: 500 }">

Demo

You please try the demo hosted on codesandbox: https://codesandbox.io/s/vuescroll-demo-orders-view-f4d3d?fontsize=14

LICENSE

MIT