GetBoundingClientRect, aber relativ zum gesamten Dokument

Gibt es eine Methode, um die Klient rect für ein Element relativ zum Dokument außer offset? getBoundingClientRect() erhält den Wert relativ zum Browser des Clients.

Ich benutze D3 und jQuerys height() Noch width() funktionieren (ich habe es sogar versucht window.load()), aber offset() ist. Weder sind Javascripts .offset

return [$e.offset().top + $e.height()/2, $e.offset().left + $e.width()/2]

$e.height() und $e.width() beide kehren zurück 0

Es ist ein SVG Element, ich benutze es nur, um meine zu bearbeiten SVG. Es ist viel einfacher, SVGs damit zu laden/zu handhaben D3. Das Projekt ist nicht datenbezogen, es ist nur eine Karte.

Verwenden element.getBoundingClientRect() von selbst zurück top und left Werte, die relativ zum Darstellungsbereich sind, wie Sie entdeckt haben. Wenn Sie möchten, dass sie relativ zum Dokument sind (und nicht von der Bildlaufposition beeinflusst werden), können Sie die Bildlaufposition mit hinzufügen window.scrollY und window.scrollXso:

const rect = element.getBoundingClientRect()

rect.left                   // (relative to viewport)
rect.top                    // (relative to viewport)
rect.left + window.scrollX  // (relative to document)
rect.top + window.scrollY   // (relative to document)

Quelle.

Hier ist eine ES6-Methode, die dieselben Eigenschaften zurückgibt wie getBoundingClientRect() aber relativ zum gesamten Dokument.

const getOffsetRect = (el) =>

  let rect   = el.getBoundingClientRect();

  // add window scroll position to get the offset position
  let left   = rect.left   + window.scrollX;
  let top    = rect.top    + window.scrollY;
  let right  = rect.right  + window.scrollX;
  let bottom = rect.bottom + window.scrollY;

  // polyfill missing 'x' and 'y' rect properties not returned
  // from getBoundingClientRect() by older browsers
  let x = rect.x === undefined ? left : rect.x + window.scrollX;
  let y = rect.y === undefined ? top : rect.y + window.scrollY;

  // width and height are the same
  let width  = rect.width;
  let height = rect.height;

  return { left, top, right, bottom, x, y, width, height };
};

Hinweis: Es ist auch Poly-Füllung x und y Props, die von älteren Browsern nicht von getBoundingClientRect() zurückgegeben werden