README
view-observer
Wrapper around Intersection Observer with added functionality.
Install
$ npm install view-observer
Also available on jsdelivr and unpkg.
Usage
import viewObserver from 'view-observer'
var footer = document.getElementById('footer')
var images = document.getElementsByClassName('images')
viewObserver().observe([footer, images])
.subscribeOnce(footer, () => {
console.log('We just reached the footer! This callback is called at most once')
})
.subscribe(images, (element) => {
console.log(`Image ${element} just entered the viewport!`)
}, (element) => {
console.log(`Image ${element} just left the viewport!`)
})
API
viewObserver([options])
Creates and returns a new viewObserver instance.
options
Type: Object { root, rootMargin, threshold }
An optional object which customizes the intersection observer itself, as described here.
Methods
observe(elements)
Adds an element (or a collection of elements) to the set of target elements being watched by the IntersectionObserver.
Returns the viewObserver instance.
elements
Type: String Array
subscribe(elements, [enterCallback, leaveCallback])
Subscribes for changes in the observed elements.
The function enterCallback is called when the target element enters the specified threshold. leaveCallback is called when the target element leaves the specified threshold.
Returns the viewObserver instance.
elements
Type: String Array
enterCallback, leaveCallback
Type: Function
subscribeOnce(elements, [enterCallback])
Subscribes for changes in the observed elements. This is called at most once.
The function enterCallback is called when the target element enters the specified threshold.
Returns the viewObserver instance.
elements
Type: String Array
enterCallback
Type: Function