Adarsh Konchady
Adarsh Konchady's Blog

Adarsh Konchady's Blog

Find if an element is completely visible in the viewport

Adarsh Konchady's photo
Adarsh Konchady
·May 18, 2016·

1 min read

Subscribe to my newsletter and never miss my upcoming articles

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;
  }
}
 
Share this