JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 48
  • Score
    100M100P100Q60418F
  • License MIT

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

Package Exports

  • element-in-viewport

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (element-in-viewport) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

element-in-viewport

npm Build Status GitHub license

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:

Chrome
Firefox
Safari
6+
Edge
Internet Explorer
7+
Opera
Android
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}`);

})();