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.