isinview
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.1 • Public • Published

    Isinview npm David npm type definitions

    Watch elements entering or leaving a viewport.

    Installation

    npm install isinview

    Demo

    Screencast

    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> 

    Dependencies (0)

      Dev Dependencies (7)

      Install

      npm i isinview

      DownloadsWeekly Downloads

      100

      Version

      2.2.1

      License

      ISC

      Unpacked Size

      42.9 kB

      Total Files

      7

      Last publish

      Collaborators

      • onset