Awesome

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/.

Awesome

vue-scrollfire

Demo

Install

Usage

Props

Events

Changelog

Development

License