Skip to main content

Find if an element is completely visible in the viewport

Updated 1 min readMarkdown
Find if an element is completely visible in the viewport

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

About the author

  • 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.

No comments yet. Be the first to comment.

More from this blog