vue-scrollfire
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
Numberprops must be set like this:after=100, this isn't working anymore:after=100 -
1.0.0
now hasleftevent
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.
Related Packages
Version History
| Version | Released | Vue | License |
|---|---|---|---|
| 2.0.0 | ^2.0.3 | MIT | |
| 1.0.0 | ^1.0.26 | MIT | |
| 0.1.0 | ^1.0.21 | MIT |