Nutritious Pumpkin Mash

    observe-element-in-viewport
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.15 • Public • Published

    observe-element-in-viewport

    In browsers that support the Intersection Observer, this library lets you find out when an element of yours is in viewport. The viewport itself is configurable. It can be the window or any other element in the DOM. Only requirement is that the element who visibility you want to check must be a child of the element you choose as your viewport.

    Installation

    npm install observe-element-in-viewport

    Usage

    Observing a target element

    import { observeElementInViewport } from 'observe-element-in-viewport'
     
    // to use window as viewport, pass this option as null
    const viewport = document.querySelector('.viewport')
     
    // element whose visibility we want to track
    const target = document.querySelector('.target')
     
    // handler for when target is in viewport
    const inHandler = (entry, unobserve, targetEl) => console.log('In viewport')
     
    // handler for when target is NOT in viewport
    const outHandler = (entry, unobserve, targetEl) => console.log('Not in viewport')
     
    // the returned function, when called, stops tracking the target element in the
    // given viewport
    const unobserve = observeElementInViewport(target, inHandler, outHandler, {
      // set viewport
      viewport,
     
      // decrease viewport top by 100px
      // similar to this, modRight, modBottom and modLeft exist
      modTop: '-100px'
     
      // threshold tells us when to trigger the handlers.
      // a threshold of 90 means, trigger the inHandler when atleast 90%
      // of target is visible. It triggers the outHandler when the amount of
      // visible portion of the target falls below 90%.
      // If this array has more than one value, the lowest threshold is what
      // marks the target as having left the viewport
      threshold: [90]
    })

    One time query to check if target element is in viewport

    import { isInViewport } from 'observe-element-in-viewport'
     
    // element whose visibility we want to track
    const target = document.querySelector('.target')
     
    // Using window as viewport, it will check the target element's
    // visibility and log true or false.
    // This function accepts a second parameter which is the same
    // as the first parameter to observeElementInViewport fn i.e.,
    // the options object.
    console.log(await isInViewport(target))

    Demo

    Try it here

    Install

    npm i observe-element-in-viewport

    DownloadsWeekly Downloads

    7,489

    Version

    0.0.15

    License

    ISC

    Unpacked Size

    20.2 kB

    Total Files

    8

    Last publish

    Collaborators

    • zeusdeux