vue-scrollfire

Fires an event on a specific scroll position

Demo

Install

npm install --save-dev vue-scrollfire
// [email protected]
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.