intersection-events v0.2.9

intersection-events

Wrapper of IntersectionObserver

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

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 => {
    // When the whole element enters window
  },
  onLeave: el => {
    // 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 => {
    // Do only once
  },
  isOnce: true
})

Browsers support

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.

If you want more features, please consider other libraries.

• Scrollama