1.0.3 • Published 4 years ago

is-in-browser-viewport v1.0.3

Weekly downloads
1
License
ISC
Repository
github
Last release
4 years ago

About

  • This package uses the Intersection Observer API to detect if an element is in the browser viewport.
  • When the webpage is scrolled, the package detects if the selected element is in the browser viewport or not.

Example

// Get the element using querySelector
let elementSelector = document.querySelector('.elementSelector');

// Check out the Intersection Observer API for all posible options
let options = {
    root: null,
    rootMargin: "10px 0px 10px 0px", // Offset position
};

//Callback function
function handleCallback(entry, observer) {
    
    if (entry[0].isIntersecting == true) {
        // If element is in the viewport
        // Code goes here
        console.log('Element is in the Viewport');
    } else {
        // If element is NOT in the viewport
        // Code goes here
        console.log('Element is NOT in the Viewport');
    }

}

// To create a new instance
new isInViewport(elementSelector, handleCallback, options);