> Faqs > Cómo saber si un elemento está en el viewport con Javascript

Cómo saber si un elemento está en el viewport con Javascript

¿Existe alguna manera de saber si un elemento está dentro del viewport en un momento dado?

Es decir, la idea es saber si un elemento de la página, una etiqueta dada, está siendo visualizada dentro del área visible del navegador. La página es muy grande y hay que hacer scroll para ver el contenido. Entonces, quiero saber si en un momento dado un elemento está viéndose por el usuario, aparece en la ventana del navegador.

¿Cómo puedo conseguir esto mediante Javascript?

Respuestas

Para saber si un elemento está dentro del viewport tienes un método de los elementos del DOM que se llama getBoundingClientRect. Este método te da una cantidad de propiedades interesantes mediante las cuales puedes calcular si está o no en el viewport un elemento de la página.

var elem = document.getElementById('elemento');
var clientRect = elem.getBoundingClientRect();

Ahora, en el objeto clientRect tendrás diversos datos desde los que puedes obtener mucha información sobre dónde está situado un elemento. Este objeto te va a dar propiedades con valores como estos:

bottom: 1036.4375
height: 37
left: 8
right: 519
top: 999.4375
width: 511
x: 8
y: 999.4375

Dentro de esas propiedades puedes usar clientRect.top y clientRect.bottom para saber la distancia que hay desde la parte de arriba del área visible del documento hasta el elemento y la distancia que hay desde la parte de abajo del área visible documento hasta el elemento.

Si tienes en cuenta además el tamaño de la ventana del navegador (que puedes calcular con las propiedades window.innerHeight o document.documentElement.clientHeight), podrás decir si la distancia que tienes en top y bottom es compatible con que el elemento se encuentre en el viewport en un momento dado.

Función Javascript para saber si un elemento está en el viewport

Esta función Javascript te indicará si un elemento que recibes por parámetro está o no en el viewport.

function isInViewport(elem) {
    var distance = elem.getBoundingClientRect();
    return (
        distance.top < (window.innerHeight || document.documentElement.clientHeight) && distance.bottom > 0
    );
}

Para usarla tienes que acceder primero a un elemento del DOM:

var elem = document.getElementById('elemento');

A continuación puedes simplemente preguntar si está o no dentro del viewport con una invocación a la función, indicando por parámetro el objeto del DOM que queremos verificar.

if (isInViewport(elem)) {
    // está en el viewport
}
Alberto
511 13 37 15
Muchas gracias Alberto, ha respondido perfectamente mi pregunta para saber si un elemento está en el viewport.