1

如何检测可滚动块内的元素是否对用户可见（即在可滚动父项的可见区域中）？

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

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

PPS 我想出的另一个想法是scrollIntoView在有问题的元素上使用，确定其位置的差异，然后将其滚动回原始位置。它似乎scrollIntoView总是做正确的事——滚动窗口和内部可滚动块！

4

1 回答 1

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));
};
于 2013-06-14T13:50:18.713 回答