问题描述:

Is there something similar to document.elementFromPoint(x,y) that works for elements that are outside the viewport?

According to the MDN docs for document.elementFromPoint() (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.

So obviously it doesn't work if you're trying to grab elements beyond the user's viewport.

Thanks!

网友答案:

Hey I had the same issue, where if the element is not within the current bounds of the viewport elementFromPoint will return null.

I find that you have to scroll to the element location to make it visible in the viewport and then perform the 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);

You can simply use this command when ever the coordinates are absolute from the pageX,pageY.

document.elementFromAbsoultePoint(2084, 1536);

This code is also on GitHub packaged into a bower component for ease of including into projects.

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

Hope this helps your project.

相关阅读:
Top