Javascript 元素是否位于内部嵌套滚动的后面

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

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

另外，我有一个想法是

getElementAtPoint

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

---

p.p.S.我想到的另一个想法是对所讨论的元素使用

scrollIntoView

，确定其位置的差异，然后将其滚动回原始位置。它显示为

scrollIntoView

总是做正确的事情–滚动窗口和内部可滚动块

如果不使用一些简单的代码进行迭代，更不用说跨浏览器了，恐怕这是不可能做到的

下面是一个例子，说明如何在IE中实现这一点。令人遗憾的是，其他浏览器似乎从

body/html.getBoundingClientRect（）

返回不同的值。此外，利润率的处理方式也有所不同（即忽略不计，其他人则予以考虑）

getVisibilityPercent=函数（）{
var target=document.getElementById（'target'），
高度=target.offsetHeight，
parent=target.parentElement，
targetRect=target.getBoundingClientRect（），
特利姆，布利姆，
百分比=1；
while（家长）{
parentRect=parent.getBoundingClientRect（）；
tLim=Math.max（targetRect.top、parentRect.top）；
bLim=Math.min（targetRect.bottom、parentRect.bottom）；
百分比*=（bLim-tLim）/高度；
百分比=（百分比<0）？0：百分比；
parent=parent.parentElement；
}
收益率+（（百分比*100）.toFixed（2））；
};

如果不使用一些简单的代码进行迭代，更不用说跨浏览器，恐怕无法完成此操作

下面是一个例子，说明如何在IE中实现这一点。令人遗憾的是，其他浏览器似乎从

body/html.getBoundingClientRect（）

返回不同的值。此外，利润率的处理方式也有所不同（即忽略不计，其他人则予以考虑）

getVisibilityPercent=函数（）{
var target=document.getElementById（'target'），
高度=target.offsetHeight，
parent=target.parentElement，
targetRect=target.getBoundingClientRect（），
特利姆，布利姆，
百分比=1；
while（家长）{
parentRect=parent.getBoundingClientRect（）；
tLim=Math.max（targetRect.top、parentRect.top）；
bLim=Math.min（targetRect.bottom、parentRect.bottom）；
百分比*=（bLim-tLim）/高度；
百分比=（百分比<0）？0：百分比；
parent=parent.parentElement；
}
收益率+（（百分比*100）.toFixed（2））；
};

你想解决什么问题？@maximkou，我想检查元素在屏幕上是否可见（假设它只能隐藏在滚动溢出后面）。也许这段代码能帮助你：或者回答：@katspaugh我试图在上用一个简单的迭代来实现它，但它只有在IE9-10中才能正常工作。看起来其他浏览器给出的值与

body/html.getBoundingClientRect（）

不同。您想解决什么问题？@maximkou，我想检查元素在屏幕上是否可见（假设它只能隐藏在滚动溢出后面）。也许这段代码能帮助你：或者这个答案：@katspaugh我试图在上用一个简单的迭代来实现它，但它只有在IE9-10中才能正常工作。看起来其他浏览器提供的值与

body/html.getBoundingClientRect（）

不同。

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