🕷️ Crawler Inspector

[](https://desarrolloweb.com/ "Desarrollo Web home page") [Temas](https://desarrolloweb.com/home) [Manuales](https://desarrolloweb.com/manuales) [FAQs](https://desarrolloweb.com/faq) [Canales](https://desarrolloweb.com/canales) [Colecciones](https://desarrolloweb.com/colecciones) Principales temas: - [Diseño](https://desarrolloweb.com/home/diseno) - [HTML](https://desarrolloweb.com/home/html) - [CSS](https://desarrolloweb.com/home/css) - [Javascript](https://desarrolloweb.com/home/javascript) - [PHP](https://desarrolloweb.com/home/php) - [.NET](https://desarrolloweb.com/home/net) Usuarios: \> [Faqs](https://desarrolloweb.com/faq) \> [Cómo saber si un elemento está en el viewport con Javascript](https://desarrolloweb.com/faq/como-saber-si-un-elemento-esta-en-el-viewport) # 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? [Editar](https://desarrolloweb.com/faq-admin/editar/como-saber-si-un-elemento-esta-en-el-viewport) [Responder la pregunta](https://desarrolloweb.com/faq-admin/nueva-respuesta/como-saber-si-un-elemento-esta-en-el-viewport) Alba 380 11 26 13 ## 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 621 16 42 18 Muchas gracias Alberto, ha respondido perfectamente mi pregunta para saber si un elemento está en el viewport. [Aportar una respuesta](https://desarrolloweb.com/faq-admin/nueva-respuesta/como-saber-si-un-elemento-esta-en-el-viewport) Aprender - [Manuales](https://desarrolloweb.com/manuales) - [Temas](https://desarrolloweb.com/home) - [Gestionar descargas](https://desarrolloweb.com/panel/downloads) - [Canales](https://desarrolloweb.com/canales) Comunidad - [Preguntas y respuestas](https://desarrolloweb.com/faq) - [Hacer una pregunta](https://desarrolloweb.com/faq-admin/nueva) - [Colecciones](https://desarrolloweb.com/colecciones) - [Experiencia](https://desarrolloweb.com/panel/puntos_ex) [Home](https://desarrolloweb.com/) [Datos legales](https://desarrolloweb.com/informacion-legal) [Privacidad](https://desarrolloweb.com/informacion-legal#privacidad) [Política de cookies](https://desarrolloweb.com/informacion-legal#cookies) [Contacto](https://desarrolloweb.com/contacto)

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 } ```