Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

element-visibility-watcher

svapreddy70Apache-2.01.0.5

Triggers an event when an element enters/leaves the screen

ractive, visibility, intersection observer api

readme

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.