How to Check If Element is Visible After Scrolling in JavaScript

These days many websites load page elements only as you scroll down, in a dynamic manner. This is true especially if you have a long web page. This approach also reduces server load by loading content only when it is required. But while loading page elements dynamically, you may want to check if it is visible after scrolling. You can easily do this using JavaScript and JS libraries. In this article, we will learn how to check if element is visible after scrolling in JavaScript.

How to Check If Element is Visible After Scrolling in JavaScript

Here are the steps to check if element is visible after scrolling.

The basic approach is to determine the top and bottom positions of your web page and compare them to the top and bottom positions of element. For this purpose, we will use the following code.

var windowTop = $(window).scrollTop();
var windowBottom = windowTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();

The first line gets the top position of window. The second line gets the bottom position of window by adding its height to the top position.

Similarly, the third line gets the top position of element while the last line calculates the bottom position of element by adding the element’s height to the top position.

Once we have these 4 values, we use the following condition to determine if the element is visible or not.

return ((elemBottom <= windowBottom) && (elemTop >= windowTop));

We return true if element’s top is more than that of window, and element’s bottom is less than that of window. In other words, it will return true if the element is completely inside the window. Else it will return false.

We will wrap these lines in a function so that it is easy to call.

function isScrolledIntoView(elem)
{
    var windowTop = $(window).scrollTop();
    var windowBottom = windowTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= windowBottom) && (elemTop >= windowTop));
}

You can directly call this function by passing the element to be evaluated, as argument.

If you want to create a utility function that can be called on all elements on page, here is the code for it. We

function Utils() {

}

Utils.prototype = {
    constructor: Utils,
    isElementInView: function (element, fullyInView) {
        var pageTop = $(window).scrollTop();
        var pageBottom = pageTop + $(window).height();
        var elementTop = $(element).offset().top;
        var elementBottom = elementTop + $(element).height();

        if (fullyInView === true) {
            return ((pageTop < elementTop) && (pageBottom > elementBottom));
        } else {
            return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
        }
    }
};

var Utils = new Utils();

The above code uses the same login that was used in our function earlier. Instead of calling the function every time and passing the element as input, you can call the above utility on all elements on your page.

var isElementInView = Utils.isElementInView($('#test-container'), false);

if (isElementInView) {
    console.log('in view');
} else {
    console.log('out of view');
}

In this article, we have learnt how to check visibility of element when you scroll page. The basic idea is to get the top & bottom position of both page as well as element and compare them to determine if the element is inside the page or not. It is very useful to determine if your page elements are visible to users as they scroll down the page, and also while loading page elements dynamically.

Also read:

How to Use Variable in Regex in JavaScript
How to Use Variable in Regex in Python
How to Split Array Into Chunks in JavaScript
How to Print Number With Commas as Thousands Separator
How to Mount Remote Filesystem in Linux