How to Check if an Element Is Visible or Hidden in jQuery?

What ways are there in jQuery to test if an element is visible or hidden? The answer depends largely on how we define visibility of an element. For example: Is an off-screen element considered visible? Is an element with zero opacity or CSS property visibility: hidden considered visible?

Before we begin, let's first be clear on the differences between different CSS properties that affect an element's visibility.

• display: none — hides the element and does not take up any space in the document;
• visibility: hidden — hides the element but it still takes up space in the document;
• opacity: 0 — same as visibility: hidden when opacity: 0

Another difference between visibility: hidden and opacity: 0 is that the element will still respond to events (like click, etc.) when opacity: 0.

Now that we're clear on the basics, let's take a look at different ways of testing for element visibility and some different interpretations of visibility.

Using jQuery's :visible & :hidden Selectors

// checks only for display: [none|block]
$(element).is(':visible');
$(element).is(':hidden');

Using jQuery's :visible and :hidden selectors only checks for the CSS display: [none|block] rule and ignores the visible: [hidden|visible] and opacity: [0-1] CSS property values.

Starting jQuery v3+, elements are considered :visible if they have a layout box (even if they're of zero width and/or height). This means that inline elements with no content will be selected by the :visible selector.

Check CSS Properties That Affect Element Visibility

CSS display Property:

// checking display property value to determine visibility
($(element).css('display') !== 'none'); // is visible?
($(element).css('display') === 'none'); // is hidden?

// checking visibility property value to determine visibility
($(element).css('visibility') !== 'hidden'); // is visible?
($(element).css('visibility') === 'hidden'); // is hidden?

// checking opacity property value to determine visibility
($(element).css('opacity') !== 0); // is visible?
($(element).css('opacity') === 0); // is hidden?

By combining the above three checks, we can create a function to check for visibility of an element like so:

// check if visible
function isVisible(element) {
    const $element = $(element);
    return (
        $element.css('display') !== 'none'
        && $element.css('visibility') !== 'hidden'
        && $element.css('opacity') !== 0
    );
}

Consider Element as Visible Only When in Active Window Viewport

The interpretation of a "visible" element can also be whether the element is actually inside the current window viewport (the current scrolled region of the document as it fits inside the size of the device) instead of the default document viewport (which means the entire document, including any off-screen unscrolled region).

/*
 * Is element inside the current scrolled region of the document
 * (as it fits inside the size of the device)?
 *
 * @param {HTMLElement} element Element to check visibility for.
 * @param {boolean} detectPartialElem If true, check if any part of the element is visible on the screen.
*/
function inViewport(element, detectPartialElem) {
    const viewport = $(window);
    const vpWidth = viewport.width();
    const vpHeight = viewport.height();
    const vpTop = viewport.scrollTop();
    const vpBottom = vpTop + vpHeight;
    const vpLeft = viewport.scrollLeft();
    const vpRight = vpLeft + vpWidth;
		
    const $element = $(element);
    const detectPartial = !!detectPartialElem; // if null or undefined, default to false

    const elementOffset = $element.offset();
    const elementTopArea = elementOffset.top + (detectPartial ? $element.height() : 0);
    const elementBottomArea = elementOffset.top + (detectPartial ? 0 : $element.height());
    const elementLeftArea = elementOffset.left + (detectPartial ? $element.width() : 0);
    const elementRightArea = elementOffset.left + (detectPartial ? 0 : $element.width());

    return (
        (elementBottomArea <= vpBottom)
        && (elementTopArea >= vpTop))
        && ((elementRightArea <= vpRight)
        && (elementLeftArea >= vpLeft)
    );
}

Example Usage:

// create dummy content
for (let i = 0; i < 25; i++) {
    $('body').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong class="output"></strong></p>');
}

// on scroll check + output the visibility state of an element
$(window).on('scroll', function() {
    // select the detection type:
    // if true, check if any part of the element is visible on the screen
    // if false, check if the entire element is visible on screen
    const detectPartial = false;

    // loop over each paragraph, and check if it's visible
    $('p').each(function(){
        // output visibility state
        $(this).find('.output').text(inViewport(this, detectPartial) ? 'on-screen' : 'off-screen');
    });
});

By default, elements with display: none are considered hidden and would not be accounted for. Elements that have visible: hidden and/or opacity: 0, however, are considered visible and will be checked. You can also combine the isVisible function with inViewport if you want to make sure the element is completely visually visible.