GetBoundingClientRect, ale w odniesieniu do całego dokumentu

Question

Czy istnieje metoda pobierania klienta rect dla elementu względem dokumentu poza offsetem? getBoundingClientRect() pobiera wartość w stosunku do przeglądarki klienta.

Używam D3 i jquery's height() ani width() działają (nawet próbowałem zrobić to window.load()), ale offset() jest. Ani są javascripts .offset

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

$ e.height() i $ e.width() zwracają 0

To element SVG, jestem po prostu używając go edytować SVG. Znacznie łatwiej jest załadować/obsłużyć SVG za pomocą D3. Projekt nie jest związany z danymi, to tylko mapa.

Answer 1

Sama sama zwraca wartości top i left, które są relatywne do widocznego obszaru, tak jak to się stało. Jeśli chcesz je mieć w stosunku do dokumentu (i nie będą naruszane przez stanowiska przewijania), można dodać pozycję przewijania za pomocą window.scrollY i window.scrollX, tak:

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) 

Source.

Answer 2

Oto metoda ES6, która zwraca wszystkie te same właściwości, co getBoundingClientRect(), ale w odniesieniu do całego dokumentu.

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 
    if (rect.x === undefined) let x = left; 
    else let x = rect.x + window.scrollX; 

    if (rect.y === undefined) let y = top; 
    else let y = 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 }; 
}; 

Uwaga: to także poli-wypełnienie x i y rekwizyty, które nie są zwracane z getBoundingClientRect() przez starszych przeglądarek