Isinview

Watch elements entering or leaving a viewport.

Installation

npm install isinview

Demo

How to use

import { isInView, isOutOfView } from 'isinview'
 
isInView(document.querySelector('#target'), (target) => {
    console.log('Target element has entered the viewport')
    target.classList.add('is-visible')
})
 
isOutOfView(document.querySelector('#target'), (target) => {
    console.log('Target element has left the viewport')
    target.classList.remove('is-visible')
})

Options

import { isInView } from 'isinview'
 
const options = {
    once: true, // Run callback only the first time for every target element [true, false]
    threshold: 0.5, // Fraction of target's area that must be visible [0 - 1]
}
 
isInView(
    document.querySelectorAll('.target'),
    (target) => {
        console.log('Target element has entered the viewport', target)
    },
    options
)

Support

import { isSupported } from 'isinview'
 
console.log(
    isSupported() ? 'IsInView is supported.' : 'IsInView is not supported!'
)

Based on IntersectionObserver (caniuse).

Polyfill for IE and old Safari:

<script
    crossorigin="anonymous"
    src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"
></script>