Javascript 调整图元的查看计算

我有一个方法来检查元素是否在视图中。并尝试运行测试以检查元素是否在视图中

var visibleY = function (el) {
   var top = el.getBoundingClientRect().top, rect, el = el.parentNode;
   do {
      rect = el.getBoundingClientRect();
      if (top <= rect.bottom === false) return false;
      el = el.parentNode;
   } while (el != document.body);
   // Check its within the document viewport
   return top <= document.documentElement.clientHeight;
};

var visibleY=函数（el）{
var top=el.getBoundingClientRect（）.top，rect，el=el.parentNode；
做{
rect=el.getBoundingClientRect（）；
if（top如果删除jQuery cruft（如果没有名为jQuery的全局变量，则会抛出一个错误），那么下面的答案将有效：

编辑
根据OP中链接的各种答案，以下内容似乎有效，只是经过了轻微测试，但在中有效。它检查元素是否在其父元素和视口中。希望注释足够：

// Return true if an element overlaps its parents and the viewport
function isVisible(element) {
  return isInParents(element) && isInViewport(element);
}

// Return true if an element overlaps its parents
function isInParents(el) {
  var rect = el.getBoundingClientRect(),
      rectP,
      visible = true;

  while (el && el.parentNode && el.parentNode.getBoundingClientRect && visible) {
    el = el.parentNode;
    rectP = el.getBoundingClientRect();
    visible = rectInRect(rectP, rect);
  }
  return visible;
}

// Return true if element overlaps the viewport
function isInViewport (element) {

    var rect = element.getBoundingClientRect();

    return rectInRect({top:0, left:0,
                       bottom: window.innerHeight || document.documentElement.clientHeight,
                       right:  window.innerWidth  || document.documentElement.clientWidth
                      }, rect);
}

// Return true if r1 overlaps r0
function rectInRect(r0, r1) {
  return r1.top    < r0.bottom &&
         r1.bottom > r0.top    &&
         r1.left   < r0.right  &&
         r1.right  > r0.left;
}

//如果元素与其父元素和视口重叠，则返回true
函数是可见的（元素）{
返回isInParents（元素）和isInViewport（元素）；
}
//如果元素与其父元素重叠，则返回true
函数isInParents（el）{
var rect=el.getBoundingClientRect（），
rectP，
可见=真实；
while（el&&el.parentNode&&el.parentNode.getBoundingClientRect&&visible）{
el=el.parentNode；
rectP=el.getBoundingClientRect（）；
可见=rectInRect（rectP，rect）；
}
返回可见；
}
//如果元素与视口重叠，则返回true
函数isInViewport（元素）{
var rect=element.getBoundingClientRect（）；
返回rectInRect（{top:0，left:0，
底部：window.innerHeight | | document.documentElement.clientHeight，
右：window.innerWidth | | document.documentElement.clientWidth
}，rect）；
}
//如果r1与r0重叠，则返回true
函数rectInRect（r0，r1）{
返回r1.topr0.顶部&&
r1.左r0.左；
}

至于元素是否可见，则取决于其他因素，例如重叠元素是否隐藏，或其他非祖先元素是否位于顶部等。这些条件可以检查，但检查得越多，效率就越低

如果彻底性和性能很重要，请为页面上所有元素的空间位置创建一个二叉树索引，并在运行时进行更新。创建索引的速度很慢，但检查位置的速度会快得多。
@PM77-1其他方法都无法达到预期效果。这仅针对父元素进行计算。我认为您需要同时检查两个条件tions是在其父元素和视口中可见的元素。@RobG使用元素的滚动顶位置？@RobG我甚至在这里尝试过这个方法，但没有帮助！谢谢你的回答。但请检查这里，即使是不在视图中的元素，它也会变为绿色。有一条评论说，这个答案的数学错误，我想我现在需要检查一下……哦，现在我明白了。这一个查看视口，而您的元素在父对象中。嗯……这变得更复杂了。您太棒了。它在我的用例中工作得很好。我甚至用不同的浏览器缩放级别检查了它。@RobG一个小测试用例，isInViewport（元素）；当事件高度大于其父对象DIV（）时返回false当两个元素在视图中各占50%时。因此删除isInViewport效果很好。我在不久前更新了我的帖子，以便在视口和父对象中使用我的rect in rect逻辑。也更新了小提琴，因此现在如果包含视口测试，该案例似乎可以正常工作。我最初测试了50/50案例，它似乎可以工作视口逻辑非常简单，可能应该在父逻辑之前。
// Return true if an element overlaps its parents and the viewport
function isVisible(element) {
  return isInParents(element) && isInViewport(element);
}

// Return true if an element overlaps its parents
function isInParents(el) {
  var rect = el.getBoundingClientRect(),
      rectP,
      visible = true;

  while (el && el.parentNode && el.parentNode.getBoundingClientRect && visible) {
    el = el.parentNode;
    rectP = el.getBoundingClientRect();
    visible = rectInRect(rectP, rect);
  }
  return visible;
}

// Return true if element overlaps the viewport
function isInViewport (element) {

    var rect = element.getBoundingClientRect();

    return rectInRect({top:0, left:0,
                       bottom: window.innerHeight || document.documentElement.clientHeight,
                       right:  window.innerWidth  || document.documentElement.clientWidth
                      }, rect);
}

// Return true if r1 overlaps r0
function rectInRect(r0, r1) {
  return r1.top    < r0.bottom &&
         r1.bottom > r0.top    &&
         r1.left   < r0.right  &&
         r1.right  > r0.left;
}