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

我能够通过将window.scrollX和window.scrollY添加到doc.elementFromPoint()输入参数x和y

来解决此问题

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

这似乎工作正常

Answer 2

我刚刚编写了一个使用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。

Answer 3

这个库应该是你想要的：https://github.com/cpatik/within-viewport/blob/master/withinViewport.js

使用elementFromPoint（）方法检查元素可见性

3 个答案: