element-visibility-watcher

ElementVisibilityWatcher

An Callback or Event is triggered when there is a change in visibility state of an Element.

#### Vanilla JS Usage:

Example fiddle

``javascript
import ElementVisibilityWatcher from 'element-visibility-watcher'

// options are optional. By the default it will listen for elements inside the parent document
let observer = new ElementVisibilityWatcher(options)

let nodeToWatch = document.getElementById('thumbnail')
observer.watch(nodeToWatch, function(visible, data) {
console.log(data)
})
`
Check Intersection Observer API for available options and data values.

#### Ractive JS Usage:
The library registers viewport event when it is loaded. Event listener can be added using on-viewport like below

Example fiddle

`javascript
import 'element-visibility-watcher'

const ractive = new Ractive({
el: "#body",
template: "#scroller",
data: {
list: dummyData
},
visibilityCheck: function(event) {
console.log(event.original.intersectionData, event.original.visible)
}
})

// in HTML:


Check Intersection Observer API for available data` values.

Note: The bundle contains Intersection Observer API polyfill. Please check Intersection Observer API & Polyfill limitations.