Находится ли элемент за внутренней вложенной прокруткой

Question

Как определить, является ли элемент внутри прокручиваемого блока видимым для пользователя (то есть находится в видимой области прокручиваемого родителя)?

Есть ли универсальное решение, не включающее итерации по всем родительским узлам с прокруткой?

PS Одна идея у меня была getElementAtPointОднако это вызывает у меня головную боль, когда мне нужно определить, виден ли хотя бы 50% элемента. Поэтому в идеале решение должно включать обнаружение столкновений между двумя прямоугольниками: прямоугольником элемента и окном.

PPS Еще одна идея, которую я придумал, это использовать scrollIntoView на рассматриваемом элементе определите разницу в его положении, а затем прокрутите его обратно в исходное положение. Кажется scrollIntoView всегда делает правильно - прокручивает как окна, так и внутренние прокручиваемые блоки!

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));
};