ElementVisibilityWatcher
Element visibility watcher utilising Intersection Observer API.
An Callback or Event is triggered when there is a change in visibility state of an Element.
Vanilla JS Usage:
Example fiddle
// options are optional. By the default it will listen for elements inside the parent document let observer = options let nodeToWatch = document observer
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
const ractive = el: "#body" template: "#scroller" data: list: dummyData { console } // in HTML: <div on-viewport="@this.visibilityCheck(event)"></div>
Check Intersection Observer API for available data
values.
Note: The bundle contains Intersection Observer API polyfill. Please check Intersection Observer API & Polyfill limitations.