intersection-events

Wrapper of IntersectionObserver

You can detect when the whole element enters and leaves window.

Demo

• GitHub Pages

Installation

ES Modules

npm

npm i intersection-events

import IntersectionEvents from 'intersection-events'

CDN

unpkg

<script src="https://unpkg.com/intersection-events"></script>

Usage

Docs

new IntersectionEvents('.js-target', {
  onEnter: (el, isUp) => {
    // When the whole element enters window
  },
  onLeave: (el, isUp) => {
    // When the whole element leaves window
  }
})

<div class="js-target"></div>

<!-- Set threshold only for this element -->
<div class="js-target" data-enter-threshold="0.5" data-leave-threshold="0.5"></div>

If you want to detect enter only once, set isOnce option to true.

new IntersectionEvents('.js-target', {
  onEnter: (el, isUp) => {
    // Do only once
  },
  isOnce: true
})

Browsers support

Edge	Firefox	Chrome
Edge	last version	last version

Note

If you need to support browsers that do not support IntersectionObserver, load the IntersectionObserver polyfill.

If the IntersectionObserver polyfill is loaded, browsers support is as follows.

IE / Edge	Firefox	Chrome	Safari	iOS Safari
IE11, Edge	last version	last version	last version	last version

---

If you want more features, please consider other libraries.

• Scrollama