In Viewport

Get callback when a DOM element enters or leaves the viewport.

Installation

Install with npm or Yarn

# npm
$ npm install @xg4/in-viewport --save

# yarn
$ yarn add @xg4/in-viewport

Usage

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/

Contributing

Welcome

• Fork it

• Submit pull request

Browsers support

Modern browsers and IE10.

| IE / Edge | Firefox | Chrome | Safari | Opera | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | IE10, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

LICENSE

MIT