https://github.com/vue-comps/vue-scrollfire
Fires an event on a specific scroll position
https://github.com/vue-comps/vue-scrollfire
Last synced: 8 months ago
JSON representation
Fires an event on a specific scroll position
- Host: GitHub
- URL: https://github.com/vue-comps/vue-scrollfire
- Owner: vue-comps
- Created: 2016-04-20T04:38:59.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-10-19T06:28:09.000Z (about 9 years ago)
- Last Synced: 2025-03-06T21:48:25.345Z (8 months ago)
- Language: CoffeeScript
- Size: 61.5 KB
- Stars: 26
- Watchers: 2
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue - vue-scrollfire - Fires an event on a specific scroll position. (Components & Libraries / UI Utilities)
- awesome-vue-refactor - vue-scrollfire
- awesome-vue-zh - vue-scrollfire - 在特定滚动位置触发事件. (UI实用程序 / 事件处理)
- awesome-vue - vue-scrollfire - Fires an event on a specific scroll position. (UI Utilities / Event Handling)
README
# vue-scrollfire
Fires an event on a specific scroll position
### [Demo](https://vue-comps.github.io/vue-scrollfire)
# Install
```sh
npm install --save-dev vue-scrollfire
// vue@1.0
npm install --save-dev vue-scrollfire@1
```
or include `build/bundle.js`.
## Usage
```coffee
# in your component
components:
"scrollfire": require("vue-scrollfire")
# or, when using bundle.js
components:
"scrollfire": window.vueComps.scrollfire
```
```html
```
For examples see [`dev/`](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.
```sh
npm install
npm run dev
```
Browse to `http://localhost:8080/`.
## License
Copyright (c) 2016 Paul Pflugradt
Licensed under the MIT license.