Find if an element is completely visible in the viewport
Published
•1 min read
A
As a Senior Principal Engineer at CVSHealth, I specialize in building and optimizing cvs.com to deliver a superior guest experience. Using the latest web technologies, my team and I work diligently to create a user-friendly and intuitive platform that exceeds expectations.
Here is the JS code to find out if a given element on the DOM is completely visible in the browser window viewport or not:
function isInViewport(element) {
var rect = element.getBoundingClientRect();
var html = document.documentElement;
if (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || html.clientHeight) &&
rect.right <= (window.innerWidth || html.clientWidth)
) {
return true;
} else {
return false;
}
}
