javascript - 元素是否位于内部嵌套滚动后面

Question

如何检测可滚动 block 内的元素是否对用户可见(即位于可滚动父级的可见区域中)？

是否有一个通用的解决方案，不涉及迭代所有具有滚动的父节点？

附注我的一个想法是 getElementAtPoint，但是当我需要确定元素的至少 50% 是否可见时，它让我头疼。因此，理想情况下，解决方案必须涉及两个矩形之间的碰撞检测:元素矩形和窗口。

P.P.S。我提出的另一个想法是在相关元素上使用 scrollIntoView ，确定其位置的差异，然后将其滚动回原始位置。看起来 scrollIntoView 总是做正确的事情 - 滚动窗口和内部可滚动 block !

Answer 1

恐怕如果不迭代，甚至更不用说跨浏览器，用一些简单的代码就无法做到这一点。

下面是一个示例，说明如何在 IE 中完成此操作。不幸的是，其他浏览器似乎从 body/html.getBoundingClientRect() 返回不同的值。另外，边距的处理方式也不同(IE 忽略，其他则考虑)。

getVisibilityPercent = function () {
    var target = document.getElementById('target'),
        height = target.offsetHeight,
        parent = target.parentElement,
        targetRect = target.getBoundingClientRect(),
        tLim, bLim,
        percent = 1;
    while (parent) {
        parentRect = parent.getBoundingClientRect();
        tLim = Math.max(targetRect.top, parentRect.top); 
        bLim = Math.min(targetRect.bottom, parentRect.bottom);
        percent *= (bLim - tLim) / height;
        percent = (percent < 0) ? 0 : percent;
        parent = parent.parentElement;
    }
    return +((percent * 100).toFixed(2));
};