Nerdy Programmers Mingling

    @libshin/in-viewport

    0.2.2 • Public • Published

    TL;DR

    Check if a DOM element is in viewport or not.

    How to use

    const inViewport = require("@libshin/in-viewport");
    
    const element = document.getElementById("id");
    
    // inViewport(element: DOMELement, strict: boolean = true)
    inViewport(element, true);
    // true

    This function has two modes:

    • strict mode
    • loose mode

    Strict mode

    In strict mode, the function inViewport returns true is the element is completely within the viewport. If a little part is off the viewport, it will return false.

    Loose mode

    In loose mode, the function inViewport returns true is at least a part of the element is within the viewport and returns false is the element is completely off the viewport.

    Listener

    const viewportListener = require("@libshin/in-viewport.listener");
    
    const element = document.getElementById("id");
    
    function onVisibilityChange(visible) {
      // content
    }
    
    // viewportListener.attach(element: DOMElement, strict: boolean, options, callback: visible => any) => id: number
    const id = viewportListener.attach(element, true, onVisibilityChange, {});
    
    // viewportListener.detach(id: number)
    viewportListener.detach(id);

    onVisibilityChange will only be called when the visibility changes.

    The strict / loose mode is the same as previously.

    Options

    const defaultOptions = {
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      now: false
    };

    top, bottom, left, right are extension values of the viewport (bottom: 50 extends the viewport of 50px at the bottom)

    now triggers the scan function immediately, and doesn't wait for a scroll, resize, load event.

    Keywords

    Install

    npm i @libshin/in-viewport

    DownloadsWeekly Downloads

    0

    Version

    0.2.2

    License

    MIT

    Unpacked Size

    94.9 kB

    Total Files

    18

    Last publish

    Collaborators

    • ayc0
    • gandem