Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xg4/in-viewport
Get callback when a DOM element enters or leaves the viewport.
https://github.com/xg4/in-viewport
dom element in-viewport intersection intersection-observer observer viewport
Last synced: 7 days ago
JSON representation
Get callback when a DOM element enters or leaves the viewport.
- Host: GitHub
- URL: https://github.com/xg4/in-viewport
- Owner: xg4
- License: mit
- Created: 2019-10-22T08:59:01.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T23:13:57.000Z (almost 2 years ago)
- Last Synced: 2024-10-31T04:49:18.044Z (15 days ago)
- Topics: dom, element, in-viewport, intersection, intersection-observer, observer, viewport
- Language: TypeScript
- Homepage: https://xg4.github.io/in-viewport/
- Size: 581 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# In Viewport
[](https://www.travis-ci.com/xg4/in-viewport)
[](https://www.npmjs.com/package/@xg4/in-viewport)
[](https://github.com/xg4/in-viewport/blob/master/LICENSE)
> Get callback when a DOM element enters or leaves the viewport.
## Installation
### Install with npm or Yarn
```bash
# npm
$ npm install @xg4/in-viewport --save
```
```bash
# yarn
$ yarn add @xg4/in-viewport
```
## Usage
```js
import InViewport from '@xg4/in-viewport'
const iv = new InViewport()
// or
const options = {} // IntersectionObserverInit options
const iv = new InViewport(options)
// entry: IntersectionObserverEntry
// observer: IntersectionObserver
function onEnter(entry, observer) {
console.log('el enter the viewport')
}
function onLeave(entry, observer) {
console.log('el leave the viewport')
}
// on
iv.on(el, onEnter)
iv.on(el, onEnter, onLeave)
iv.on(el, {
onEnter,
onLeave
})
// off
iv.off(el)
// once
iv.once(el, onEnter)
iv.once(el, onEnter, onLeave)
iv.once(el, {
onEnter,
onLeave,
once: true
})
// also use it, like this
iv.on(el)
.on(el2)
.once(el3)
.off(el4)
```
## Example
> [https://xg4.github.io/in-viewport/](https://xg4.github.io/in-viewport/)
## Contributing
Welcome
- Fork it
- Submit pull request
## Browsers support
Modern browsers and IE10.
| [
](http://godban.github.io/browsers-support-badges/)IE / Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)Opera |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| IE10, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
## LICENSE
MIT