Checking if an element is trully visible on screen

Question

Is there a way to check if a DOM element is really visible on screen?

Meaning :

Its not hidden (e.g: display: none, visibility: hidden)
Its not hidden by another element
its opacity is not 0, neither is the opacity of one of its parents.

(these are the cases i could think of)

this is what i got so far

function isVisible(el) {
    //is hidden (display, visibility)
    var isHidden = el.style.display == 'none' || ['collapse', 'hidden'].indexOf(el.style.visibility) == -1;
    if(isHidden)
        return false;

    //is hidden by another element
    el.scrollIntoView();
    var rect = el.getBoundingClientRect();
    var targetAtPos = document.elementFromPoint(rect.left, rect.top);
    var isHiddenByAnother = targetAtPos != el;
    if(isHiddenByAnother)
        return false;

    //Check opacity
}

Although its probably a duplicate, OP stated the question clearly and showed effort in finding a solution. Whats with all the downvotes? — Alexandru Severin, Dec 20 '16 at 12:52
Possible duplicate of [Check if element is visible in DOM](http://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom) — Clive, Dec 20 '16 at 12:53
@Clive the question you posted does not cover 2nd and 3rd cases on my question — Youssef, Dec 20 '16 at 13:28

score 0 · Answer 1 · answered Mar 10 '23 at 08:56

Many of these checks are done by the pretty new (e.g. yet not supported by Safari as of March 10, 2023) el.checkVisibility(). That covers display: none, visibility: hidden, visibility: collapse, opacity: 0 and lots of other edge cases that you and me would probably forget.

This does, however, to my knowledge, not check whether the element is hidden behind another element or outside the viewport. So this is where you could use your elementFromPoint technique.

Checking if an element is trully visible on screen

1 Answers1