How To Find If An Element Is In Viewport With JavaScript

In this tutorial you will learn how to check if an element is visible in viewport with JavaScript. When an element is in the viewport it appears in the visible part of the screen.

To check if an element is visible in the viewport you can use the following function. There is two ways you can do this.

First if you need to detect when element at least a bit showing in your screen you can use function like this:

function isInViewport(el) {
  const rect = el.getBoundingClientRect();
  return (
    //CHECK IF PARTIALY VISIBLE
    rect.top < window.innerHeight && rect.bottom >= 0
  );
}

If the element is in the viewport, the function returns true, else you will get false.

You may want to check if an element is visible in the viewport if you want to:

• Perform lazy loading images. You only load the image if its container is visible in the current viewport. This increases the loading speed of the page.
• Load a script to show the ads if it is in the viewport. This saves the advertisers a lot of money spending for impressions that users may not see the below-the-fold ads.
• Or for example you want to add on scroll animations to your website.

Getting the relative position of an element with JavaScript

The method element.getBoundingClientRect() provides the element’s position and its relative position to the viewport. It returns an object that includes element’s height, width, and its distance from the top, left, bottom, and right of the viewport.

Let’s say you have <div> element like this:

<div class="container"></div>

To get the <div> element’s position in the viewport, you use the getBoundingClientRect() method:

const container = document.querySelector('.container');
const rect = container.getBoundingClientRect();

console.log(rect);

In a console you would get something like this:

    x: 120
    y: 202
    width: 300
    height: 250
    top: 182
    right: 400
    bottom: 432
    left: 100

If the <div> element is in the viewport, its top and left are always greater than or equal to zero. Also its distance from the right is less than or equal to the width of the viewport and its distance from the bottom is less than or equal to the height of the viewport.

To get the width, the height of the viewport you use the window.innerWidth and window.innerHeight in moder browsers. Some browsers use the document.documentElement.clientWidth and document.documentElement.clientHeight.

To support all browsers, you can try to use both, like this:

const viewportWidth = window.innerWidth || document.documentElement.clientWidth;

const viewportHeight = window.innerHeight || document.documentElement.clientHeight;

The following code detects if the element is in viewport fully:

function isInViewport(el) {
  const rect = el.getBoundingClientRect();

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

Or if you need to detect element when at least part of it is visible you use this code:

function isInViewport(el) {
  const rect = el.getBoundingClientRect();
  // console.log(rect);
  return (
    //CHECK IF PARTIALY VISIBLE
    rect.top < window.innerHeight && rect.bottom >= 0
  );
}

To better understand the code. Just try it yourself and console.log everything. When you’ll see the output in console it will become super simple to understand this concept.