How to tell if a DOM element is visible in the current viewport?

To determine if a DOM element is visible in the current viewport, you can use JavaScript. Here’s a basic approach:

function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

// Example usage:
var element = document.getElementById('yourElementId');
if (isElementInViewport(element)) {
    console.log('Element is visible in the viewport');
} else {
    console.log('Element is not visible in the viewport');
}

This function checks if the bounding rectangle of the element is within the viewport bounds. If all four sides of the rectangle are within the viewport, then the element is considered visible. Otherwise, it’s considered not visible.

You can call this function passing the DOM element you want to check as an argument.