element-in-viewport

Async module that resolves when a target element has entered the viewport at a threshold, using Intersection Observer API

Usage no npm install needed!

<script type="module">
  import elementInViewport from 'https://cdn.skypack.dev/element-in-viewport';
</script>

README

element-in-viewport

An async module that resolves when an element has entered the viewport at a certain percentage, using the Intersection Observer API.

Polyfilled with the Intersection Observer Polyfill

With the polyfill, IntersectionObserver has been tested and known to work in the following browsers:

✔

✔

✔

✔

4.4+

Install:

npm i -S element-in-viewport

Example Usage:

import elementInViewport from 'element-in-viewport';

(async () => {

    const targetElement = document.querySelector('#targetElement');

    const entry = await elementInViewport(targetElement, 0);

    alert(`Intersection in Viewport Detected at IntersectionRatio ${entry.intersectionRatio}`);

})();