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

Checking element visibility using elementFromPoint() method

本文关键字：检查 元素 可见性 方法 elementFromPoint 使用      更新时间：2023-09-26

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

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的反面？还是有人有其他方法？

我刚刚编写了一个使用 elementFromPoint() 方法的 isVisible() 方法，应该在 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'));

另外，这是它的要点。

我能够通过向doc.elementFromPoint()输入参数添加window.scrollX和window.scrollY来解决此问题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;
     },

这似乎工作正常

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

相关文章：