not - GetBoundingClientRect() de JavaScript cambia durante el desplazamiento

getboundingclientrect scroll

Question

Quiero tener la distancia exacta entre la coordenada Y de un elemento y el valor Y = 0, que considero como la parte superior del documento.

myElement.getBoundingClientRect().top;

Pero el valor de getBoundingClientRect () parece cambiar durante el desplazamiento. ¿Cómo puedo obtener la distancia real entre myElement y la coordenada Y = 0 (parte superior del documento)?

Answer 1

Esto se debe a que getBoundingClientRect() obtiene valores con respecto a la window (solo la parte visible actual de la página), no el document (página completa).
Por lo tanto, también tiene en cuenta el desplazamiento al calcular sus valores
Básicamente, document = window + scroll

Entonces, para obtener la distancia entre myElement y la coordenada Y = 0 (parte superior del documento), también debería agregar el valor de desplazamiento vertical:

myElement.getBoundingClientRect().top + window.scrollY;

Fuente: https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect

Answer 2

getBoundingClientRect necesita un poco más de cuidado para evitar errores en scrollY / pageYOffset:

function absolutePosition(el) {
    var
        found,
        left = 0,
        top = 0,
        width = 0,
        height = 0,
        offsetBase = absolutePosition.offsetBase;
    if (!offsetBase && document.body) {
        offsetBase = absolutePosition.offsetBase = document.createElement(''div'');
        offsetBase.style.cssText = ''position:absolute;left:0;top:0'';
        document.body.appendChild(offsetBase);
    }
    if (el && el.ownerDocument === document && ''getBoundingClientRect'' in el && offsetBase) {
        var boundingRect = el.getBoundingClientRect();
        var baseRect = offsetBase.getBoundingClientRect();
        found = true;
        left = boundingRect.left - baseRect.left;
        top = boundingRect.top - baseRect.top;
        width = boundingRect.right - boundingRect.left;
        height = boundingRect.bottom - boundingRect.top;
    }
    return {
        found: found,
        left: left,
        top: top,
        width: width,
        height: height,
        right: left + width,
        bottom: top + height
    };
}

Los errores a evitar son:

• desplazarse en Android Chrome ya que Chrome Mobile 43 tiene valores incorrectos para desplazamientoY / páginaYOffset (especialmente cuando se muestra el teclado y se desplaza).

• Pinch-zoom en Microsoft IE o Edge causa valores incorrectos para scrollY / pageYOffset.

• Algunos navegadores (obsoletos) no tienen una altura / ancho, por ejemplo, IE8

Editar: el código anterior se puede simplificar mucho simplemente usando document.body.getBoundingClientRect() lugar de agregar un div; sin embargo, no lo he probado, así que dejo mi respuesta tal como está. También el cuerpo necesita margin:0 (reset.css generalmente hace esto). ¡Esta respuesta simplifica mucho el código, al tiempo que evita los errores en jQuery.offset ()!

Edición 2: Chrome 61 introdujo window.visualViewport para proporcionar valores correctos para la ventana window.visualViewport real, que probablemente sea otra forma de solucionar problemas; pero tenga en cuenta que Android Chrome 66 todavía presentaba errores si se Settings -> Accessability -> Force enable zoom (errores con cambio de orientación, entradas enfocadas, ventana emergente posicionada absolutamente más ancha que la ventana gráfica).