Necesito encontrar la distancia entre el elemento y la parte inferior de la ventana del navegador

Question

Necesito encontrar la distancia entre el elemento y la parte inferior de la ventana del navegador.

Cuando selecciono el elemento, y la distancia entre el elemento y la parte inferior de la ventana del navegador es menor que 50 px, quiero que la ventana se desplace automáticamente.

¿Alguna idea? Prefiero usar jQuery.

Answer 1

A diferencia de otras coordenadas del sistema en el navegador es de arriba a abajo, significa que la parte superior del navegador es y = 0.

Hay dos propiedades del elemento DOM para obtener la posición de un elemento en la página. Las propiedades son element.offsetTop y element.offsetHeight

Se puede calcular el espacio entre el elemento y la parte inferior de la página mediante el cálculo de element.offsetTop y window.innerHeight.

var space = window.innerHeight - element.offsetTop 

si se quiere calcular el espacio entre la parte inferior de su elemento y la parte inferior de la ventana, entonces es necesario agregar su altura elemento también.

var space = window.innerHeight - element.offsetTop + element.offsetHeight 

Este cálculo a veces es necesario. Piensa que tienes un posicionamiento basado en porcentajes y quieres saber la posición de tu elemento por píxeles para hacer algo. Por ejemplo, usted tiene un div posicionado como esto:

div{ 
    width:300px; 
    height:16.2%; 
    position:absolute; 
    top: 48.11%; 
    border:3px dotted black; 
} 

entonces usted quiere saber cuando el div se encuentra cerca de la ventana del navegador para cambiar su color:

var div = document.querySelector('div'), 
    space = innerHeight - div.offsetTop + div.offsetHeight; 

window.onresize = function(){ 
    space = innerHeight - div.offsetTop + div.offsetHeight; 
    if(space < 200){ 
     div.style.background = 'blue'; 
    } 
}; 

Fiddle

Answer 2

usando element.getBoundingClientRect() se una buena manera directa de obtener el desplazamiento de la parte inferior del elemento que es relativo a la ventana gráfica en lugar del documento. Luego puede restar este valor de window.innerHeight para calcular el espacio restante entre el elemento y la parte inferior de la ventana del navegador (ventana gráfica). Al igual que en el ejemplo siguiente:

var element = document.querySelector('.inner'); 
 

 
window.onscroll = function() { 
 
    var domRect = element.getBoundingClientRect(); 
 
    var spaceBelow = window.innerHeight - domRect.bottom; 
 
    
 
    element.style.background = (spaceBelow < 50 ? 'blue' : 'transparent'); 
 
};

body { 
 
    height: 1000px; 
 
} 
 

 
.outer { 
 
    position: absolute; 
 
    top: 120px; 
 
    border: 1px dashed green; 
 
    width: 95%; 
 
    height: 80px; 
 
} 
 

 
.inner { 
 
    width:300px; 
 
    height:16.2%; 
 
    position: absolute; 
 
    top: 48.11%; 
 
    border:3px dotted black; 
 
}

<div class="outer"> 
 
    <div class="inner"></div> 
 
</div>

Si prefiere usar jQuery entonces alternativamente el siguiente código también debería funcionar:

var spaceBelow = $(window).height() - $('.inner')[0].getBoundingClientRect().bottom;