Neurotic and Probably Misinformed

npm

Need private packages and team management tools?Check out npm Orgs. »

element-visibility-watcher

1.0.5 • Public • Published

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.

install

npm i element-visibility-watcher

Downloadsweekly downloads

1

version

1.0.5

license

Apache-2.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability