Javascript在视口(viewport)外点获取元素

Question

是否有类似于 document.elementFromPoint(x,y) 的东西适用于视口(viewport)之外的元素？

根据 document.elementFromPoint() 的 MDN 文档( https://developer.mozilla.org/en-US/docs/DOM/document.elementFromPoint )

If the specified point is outside the visible bounds of the document or either coordinate is negative, the result is null.

因此，如果您试图抓取超出用户视口(viewport)的元素，显然它是行不通的。

谢谢!

Answer 1

嘿，我有同样的问题，如果元素不在视口(viewport)的当前范围内 elementFromPoint将返回 null .

我发现您必须滚动到元素位置才能使其在视口(viewport)中可见，然后执行 elementFromPoint .

(function() {
  'use strict';
  var api;
  api = function(x,y) {
    var elm, scrollX, scrollY, newX, newY;
    /* stash current Window Scroll */
    scrollX = window.pageXOffset;
    scrollY = window.pageYOffset;
    /* scroll to element */
    window.scrollTo(x,y);
    /* calculate new relative element coordinates */
    newX = x - window.pageXOffset;
    newY = y - window.pageYOffset;
    /* grab the element */
    elm = this.elementFromPoint(newX,newY);
    /* revert to the previous scroll location */
    window.scrollTo(scrollX,scrollY);
    /* returned the grabbed element at the absolute coordinates */
    return elm;
  };
  this.document.elementFromAbsolutePoint = api;
}).call(this);

只要坐标是 pageX 中的绝对坐标，您就可以简单地使用此命令。 , pageY .

document.elementFromAbsolutePoint(2084, 1536);

该代码也在 GitHub 上打包成一个 bower 组件，以便于包含到项目中。

https://github.com/kylewelsby/element-from-absolute-point

希望这对您的项目有所帮助。