Vue scrollfire

fires an event on a specific scroll position

Version: 2.0.0 Updated: 10/19/2016

By: vue-comps License: MIT

Downloads Last 30 Days: 168

vue-scrollfire

Fires an event on a specific scroll position

Demo

Install

npm install --save-dev vue-scrollfire
// vue@1.0
npm install --save-dev vue-scrollfire@1

or include build/bundle.js.

Usage

# in your component
components:
  "scrollfire": require("vue-scrollfire")
# or, when using bundle.js
components:
  "scrollfire": window.vueComps.scrollfire
<scrollfire></scrollfire>

For examples see dev/.

Props

Name type default description
multiple Boolean false set to fire on every time the element enters, leaves or moves within the viewport
offset Number 0 lateral offset when to fire
after Number 0 milliseconds to wait until fire
ignoreParent Boolean false don't use the bounding box of parent but of scrollfire span
initial Boolean false fires entered and left on initial page load when element top or bottom is in or above viewport

Events

Name description
entered will be fired on entering of viewport
progress will be fired on scrolling of viewport. Argument: {top,bottom}
left will be fired on leaving of viewport

Changelog

  • 2.0.0
    added vue 2.0.0 compatibility
    Number props must be set like this :after=100, this isn't working anymore: after=100

  • 1.0.0
    now has left event
    uses parent for size calculation

Development

Clone repository.

npm install
npm run dev

Browse to http://localhost:8080/.

License

Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.

Categories: Vue js