检查元素是否在屏幕上完全可见

Question

有没有办法检查屏幕上是否真的可以看到DOM元素？

意义：

• 它没有被隐藏（例如：display：none，visibility：hidden）
• 它没有被其他元素隐藏
• 其不透明度不为0，也不是其中一个父母的不透明度。

（这些是我能想到的情况）

这是我到目前为止所得到的

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
}