Detect When Entire Element Displayed in Viewport

Detect when an HTML element comes entirely into view.

document.addEventListener("scroll", inView);

function inView() {
    if (document.getElementById("viewElement").getBoundingClientRect().bottom <= window.innerHeight) {
        console.log("Entire element is now in view");
        // remove the line below to make it fire continuously when in view
        document.removeEventListener("scroll", inView);
    }
}

Example:

Scroll the page.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat luctus justo, eget scelerisque neque consectetur id. Ut maximus congue ligula ut ornare. Donec eget vestibulum tellus. Proin non condimentum neque, a facilisis est. Suspendisse imperdiet, mauris vitae imperdiet ultricies, tellus est condimentum nibh, a maximus leo sem interdum libero. Suspendisse potenti. Praesent sed orci vitae erat dignissim suscipit in id mi. In elementum dictum sagittis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat luctus justo, eget scelerisque neque consectetur id. Ut maximus congue ligula ut ornare. Donec eget vestibulum tellus. Proin non condimentum neque, a facilisis est. Suspendisse imperdiet, mauris vitae imperdiet ultricies, tellus est condimentum nibh, a maximus leo sem interdum libero. Suspendisse potenti. Praesent sed orci vitae erat dignissim suscipit in id mi. In elementum dictum sagittis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat luctus justo, eget scelerisque neque consectetur id. Ut maximus congue ligula ut ornare. Donec eget vestibulum tellus. Proin non condimentum neque, a facilisis est. Suspendisse imperdiet, mauris vitae imperdiet ultricies, tellus est condimentum nibh, a maximus leo sem interdum libero. Suspendisse potenti. Praesent sed orci vitae erat dignissim suscipit in id mi. In elementum dictum sagittis.

** Alert will pop when this entire paragraph is displayed in the window. Note: The alert will only pop up once. To make it continuously remove the line with document.removeEventListener("scroll", inView); Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat luctus justo, eget scelerisque neque consectetur id. Ut maximus congue ligula ut ornare. Donec eget vestibulum tellus. Proin non condimentum neque, a facilisis est. Suspendisse imperdiet, mauris vitae imperdiet ultricies, tellus est condimentum nibh, a maximus leo sem interdum libero. Suspendisse potenti. Praesent sed orci vitae erat dignissim suscipit in id mi. In elementum dictum sagittis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat luctus justo, eget scelerisque neque consectetur id. Ut maximus congue ligula ut ornare. Donec eget vestibulum tellus. Proin non condimentum neque, a facilisis est. Suspendisse imperdiet, mauris vitae imperdiet ultricies, tellus est condimentum nibh, a maximus leo sem interdum libero. Suspendisse potenti. Praesent sed orci vitae erat dignissim suscipit in id mi. In elementum dictum sagittis.