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

| 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