Javascript在视口外获取元素

时间:2013-10-31 20:03:43

标签: javascript

是否有类似于document.elementFromPoint(x,y)的内容适用于视口之外的元素?

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

  

如果指定的点位于文档的可见边界之外   或者任一坐标为负数,结果为空。

显然,如果你试图抓住用户视口之外的元素,它就不起作用。

谢谢!

1 个答案:

答案 0 :(得分:8)

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

我发现您必须滚动到元素位置才能使其在视口中可见,然后执行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);

只要坐标是pageXpageY的绝对坐标,您就可以使用此命令。

document.elementFromAbsolutePoint(2084, 1536);

此代码也在GitHub上打包成一个凉亭组件,以便于包含在项目中。

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

希望这有助于您的项目。