Question

我有一种方法可以检查某个元素是否在How to tell if a DOM element is visible in the current viewport?中。并尝试运行测试以检查元素是否在视图中

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

如果删除jQuery cruft（如果没有名为 jQuery 的全局变量会抛出错误），that question的以下答案会有效：

[deleted code]

修改

基于OP中链接的各种答案，以下似乎有效，只是经过了轻微测试，但它适用于OP's fiddle。它检查元素是否在其父级和视口内。希望这些评论足够：

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

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

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

调整元素的InView计算

1 个答案:

修改