CODE EXAMPLE FOR JAVASCRIPT

how to detect if a particular html element is on viewport or not using javascript

// The following function can be used to check if an element is in the viewport or not if the element is in the viewport this function will return true else it will return false
// this function is taken from: https://www.javascripttutorial.net/dom/css/check-if-an-element-is-visible-in-the-viewport/
function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}