svapreddy / element-visibility-watcher

Event will be fired when Element has come visible from invisible state or vice versa.

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

  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

  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:
  <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.