Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 

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.

About

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

Resources

License

Releases

No releases published

Packages

No packages published