Wrapper around Intersection Observer with added functionality.
$ npm install view-observer
Also available on jsdelivr and unpkg.
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!`)
})Creates and returns a new viewObserver instance.
Type: Object { root, rootMargin, threshold }
An optional object which customizes the intersection observer itself, as described here.
Adds an element (or a collection of elements) to the set of target elements being watched by the IntersectionObserver.
Returns the viewObserver instance.
Type: String Array
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.
Type: String Array
Type: Function
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.
Type: String Array
Type: Function