javascript - 调整元素的 InView 计算

Question

我从 How to tell if a DOM element is visible in the current viewport? 得到了一个检查元素是否在 View 中的方法。 .并尝试运行测试以检查元素是否在 View 中

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

但是对于所有低于父元素的客户端高度值的元素，它都返回 true。使这项工作需要进行哪些更改。 Fiddle

Answer 1

以下答案来自that question如果你删除了 jQuery cruft(如果你没有名为 jQuery 的全局变量，它会抛出一个错误):

[deleted code]

编辑

根据 OP 中链接的各种答案，以下似乎有效，只是经过轻微测试但它在 OP's fiddle 中有效.它检查元素是否在其父元素和视口(viewport)中。希望评论足够了:

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

元素是否可见取决于其他因素，例如重叠元素是否被隐藏，或者其他非祖先元素是否位于顶部等。这些条件可以检查但是它您必须检查的越多，效率就会越来越低。

如果彻底性和性能很重要，请为页面上所有元素的空间位置创建一个二叉树索引，并随时更新它。创建索引很慢，但检查位置会快得多。