javascript - 使用 elementFromPoint() 方法检查元素可见性

Question

在开始使用以下函数处理项目之前，我正在尝试检查以确保该项目可见

isVisible: function (node, doc, x, y) {
    var el = doc.elementFromPoint(x, y);
    if (node === el) return true;
    else return false;
},

x 和 y 是所选节点的位置，计算公式为

findPos: function (node) {
    var pos = new Object();
    pos.left = pos.top = 0;
    if (node.offsetParent) {
        do {
            pos.left += node.offsetLeft;
            pos.top += node.offsetTop;

        } while (node = node.offsetParent);
    }
    return pos;
}

一切正常。但是，当我向下滚动页面时，isVisible 函数不再返回正确的值。这是由于位置已更改但查找位置函数未返回正确的值造成的。

是否有一种方法可以像 elementFromPoint 的相反那样获取元素的位置？或者有人有其他方法吗？

Answer 1

我刚刚编写了一个 isVisible() 方法，该方法使用 elementFromPoint() 方法，并且应该在 IE9+ 中工作以检测元素是否可见。

var isVisible = function(elem) {
  var w = window, d = document, height, rects, on_top;
  if(!elem || (elem && elem.nodeType !== 1) || !elem.getClientRects || !d.elementFromPoint || !d.querySelector || !elem.contains) {
    return false;
  }
  if (elem.offsetWidth === 0 || elem.offsetHeight === 0) {
    return false;
  }
  height = w.innerHeight ? w.innerHeight: d.documentElement.clientHeight;
  rects = elem.getClientRects();
  on_top = function(r, elem) {
    var x = (r.left + r.right)/2,
      y = (r.top + r.bottom)/2,
      elemFromPoint = d.elementFromPoint(x, y);
      return (elemFromPoint === elem || elem.contains(elemFromPoint));
  };
  for (var i = 0, l = rects.length; i < l; i++) {
    var r = rects[i],
      in_viewport = r.top > 0 ? r.top <= height : (r.bottom > 0 && r.bottom <= height);
    if (in_viewport && on_top(r, elem)) {
      return true;
    }
  }
  return false;
};

您可以这样调用它:isVisible(document.getElementById('at-follow'));

此外，这是 gist其中。