Check If an Element is Visible in the Viewport in JavaScript

Summary: in this tutorial, you’ll learn how to check if an element is visible in the viewport using 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 use the following isInViewport() helper function:

function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}
Code language: JavaScript (javascript)

If the element is in the viewport, the function returns true. Otherwise, it returns false.

Checking if an element is visible in the viewport has many applications, for example:

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.

Let’s dive into the isInViewport() function to understand how it works.

Getting the relative position of an element

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.

Check If an Element is Visible in the Viewport

Suppose that you have <div> element as follows:

<div class="box"></div>Code language: HTML, XML (xml)

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

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

console.log(rect);
Code language: JavaScript (javascript)

Output:

{
    x: 100
    y: 182
    width: 300
    height: 250
    top: 182
    right: 400
    bottom: 432
    left: 100
}
Code language: CSS (css)

If the <div> element is in the viewport, its top and left are always greater than or equal zero. In addition, its distance from the right is less than or equal to the width of the viewport, and ids 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 modern browsers. Some browsers, however, use the document.documentElement.clientWidth and document.documentElement.clientHeight.

To support all browsers, you can try one and fallback to other, like this:

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

const viewportHeight = window.innerHeight || document.documentElement.clientHeight;Code language: JavaScript (javascript)

The following detects if the <div> element is in the viewport:

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

const isInViewport = rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth);

console.log(isInViewport);Code language: JavaScript (javascript)

Hence, you can wrap the logic in a helper function isInViewport() and use it as follows:

const box = document.querySelector('.box');
const result = isInViewport(box);Code language: JavaScript (javascript)

When you scroll the document, the box will not be in the viewport. To monitor this, you can listen to the scroll event and show the result in another div element.

The following show the HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Check if an element is visible in the viewport</title>
    <link rel="stylesheet" href="css/style-viewport.css">
</head>
<body>
    <div class="box"></div>
    <div id="message">Please scroll to check if the box is visible</div>
    <script src="js/app.js"></script>
</body>
</html>Code language: HTML, XML (xml)

Here is the JavaScript file:

function isInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)

    );
}


const box = document.querySelector('.box');
const message = document.querySelector('#message');

document.addEventListener('scroll', function () {
    const messageText = isInViewport(box) ?
        'The box is visible in the viewport' :
        'The box is not visible in the viewport';

    message.textContent = messageText;

}, {
    passive: true
});
Code language: JavaScript (javascript)

Output:

Demo

Summary

Use the getBoundingClientRect() method to get the size of the element and its relative position to the viewport.
Compare the position of the element with the viewport height and width to check if the element is visible in the viewport or not.

Was this tutorial helpful ?