Recommend to use the scroll implemenation of vuejs event handler

<!-- the scroll event's default behavior (scrolling) will happen -->
<!-- immediately, instead of waiting for `onScroll` to complete  -->
<!-- in case it contains `event.preventDefault()`                -->
<div v-on:scroll.passive="onScroll">...</div>

scroll directive for vuejs 2.0

For vue 1.x, please use [email protected]. Currently its code is in master branch.

npm install vue-scroll --save

Standalone bundle is not support on latest v2.1.0 currently

Simple download from releases and include it in script tag.

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

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 }">

• Component Demo

Below two demos are uncommonly used and outdated.

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

MIT