vpi-observer/test.js

Detect intersection between DOM elements and viewport using IntersectionObserver API

import VpiObserver from './index.js'

for (let i = 0; i < 10; i++) {
  let div = document.createElement('div')
  div.classList.add('vpio-target')
  div.style['width'] = '100vw'
  div.style['height'] = '110vh'
  div.setAttribute('data-id', i)
  document.body.appendChild(div)
}

const vpio = new VpiObserver({
    /* IntersectionObserver API Default Config base on Mozilla Developer Network exemple. (optional) */
  config: {
    rootMargin: '50px 0',
    threshold: 0.01
  },
    /* Custom callback (required) */
  onIntersect: function (element) {
  	console.log(element)
  },
    /* Define wether or not use a scroll based fallback (optional) */
  scrollPolyfill: true,
    /* Use your own selector. There is no default class here (required) */
  targets: '.vpio-target',
    /* Verbose login on intersection, or not (optional) */
  verbose: false
})