vue-scrollfire
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 hasleft
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.
Dependencies
Dependencies
chai: ^3.5.0chai-spies: ^0.7.1coffee-loader: ^0.7.2coffee-script: ^1.11.1gh-pages: ^0.11.0karma: ^1.3.0karma-chai: ^0.1.0karma-chai-dom: ^1.1.0karma-chai-spies: ^0.1.4karma-chrome-launcher: ^2.0.0karma-firefox-launcher: ^1.0.0karma-mocha: ^1.2.0karma-sourcemap-loader: ^0.3.7karma-spec-reporter: ^0.0.26karma-vue-component: ^2.0.1karma-webpack: ^1.8.0mocha: ^3.1.2pug: ^2.0.0-beta6script-runner: ^0.1.6vue: ^2.0.3vue-compiler: ^2.0.0vue-dev-server: ^2.0.1vue-html-loader: ^1.2.3vue-loader: ^9.7.0webpack: ^1.13.2