ElementVisibilityObserver

This is a wrapper of IntersectionObserver JavaScript API for detecting element visibility.

No dependencies. But currently (2018) Safari (and IE) is not supporting IntersectionObserver, you will need IntersectionObserver polyfill. Please consider the limitations of the polyfill and check the latest browser support before use in production.

Installation

``sh
npm install element-visibility-observer
`
or
`sh
yarn add element-visibility-observer
`

Polyfills you will need

`sh
npm install intersection-observer @babel/polyfill
`
or
`sh
yarn add intersection-observer @babel/polyfill
`
* intersection-observer: IntersectionObserver support in Safari and IE
* @babel/polyfill: Array.from and Object.assign if you need IE support

Usage

$3

Demo on Codepen
#### HTML
`html

1

2

3

`
#### JavaScript
`javascript
const elementVisibilityObserver = new ElementVisibilityObserver()
elementVisibilityObserver.observe(
'.box',
target => target.classList.add('visible'), // onVisible
target => target.classList.remove('visible'), // onHidden
);
`

$3

Demo on Codepen

$3

Demo on Codepen

API

$3

#### new ElementVisibilityObserver([visibleRatio [, observerOption]])
- visibleRatio
- Type: Number from 0 to 1
- Default: 0.25
- Element is defined as "visible" when more then 25% of the element is visible in viewport (or root element).
- observerOption
- Type: Object
- Default:
`javascript
{
root: null,
rootMargin: '0px',
threshold: [0, this.visibleRatio, 1]
}
`
- See MDN - IntersectionObserver#Properties.

$3

#### .observe(target [, onVisible [, onHidden]])
Observe all target elements.
- target: String of CSS selector || NodeList || Element
- onVisible(target, entry, observer): Callback function triggers when the element is visible.
- onHidden(target, entry, observer): Callback function triggers when the element is not visible.
- target: IntersectionObserverEntry.target
- entry: IntersectionObserverEntry
- observer: IntersectionObserver

#### .disconnect()
Destroy all observers

$3

#### .observers
Array of IntersectionObserver`