Checking if an element is trully visible on screen

Asked Dec 20 '16 at 12:49

Active Dec 20 '16 at 13:26

Viewed 769 times

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
}

edited Dec 20 '16 at 13:26

asked Dec 20 '16 at 12:49

Youssef

1,023
8
16

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
1

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
It does - read all the answers – Clive Dec 20 '16 at 13:34
1

which answer are you referring to? – Youssef Dec 20 '16 at 15:01

Checking if an element is trully visible on screen

0 Answers0