vue-scroll

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

• Component Demo

Below two demos are uncommonly used and outdated.

• Sample - commonjs Introduction
• Sample - standlone *** Try it now

LICENSE

MIT