VKT Toolkit · 11 de septiembre de 2026 · 9 min de lecturaCómo capturar una página con desplazamiento en Chrome — Cuando la carga diferida y el scroll infinito lo rompen todo
Pulsas el botón de captura. La herramienta se desplaza hacia abajo, captura algunos viewports y los une. El resultado: el tercio superior se ve bien, el medio son rectángulos blancos vacíos donde deberían haber imágenes, y la mitad inferior falta completamente porque la página siguió cargando nuevo contenido mientras la herramienta pasaba por encima. ¿Te suena familiar?
Las páginas web modernas no son documentos estáticos. Cargan imágenes al desplazarse (carga diferida), añaden nuevo contenido al llegar al final (scroll infinito), fijan encabezados y barras de navegación al viewport (position: fixed) y a veces bloquean el clic derecho o la selección por completo. Una herramienta de captura que se desplaza ciegamente y captura píxeles fallará en estas páginas. Esta guía cubre por qué falla y cómo capturar estas páginas correctamente.
Por qué las herramientas de captura estándar fallan en páginas modernas
Hay tres problemas distintos, y la mayoría de herramientas solo resuelven uno:
| Problema | Qué ocurre | Qué páginas |
|---|---|---|
| Carga diferida | Las imágenes y el contenido debajo del viewport aún no se han cargado. La captura obtiene marcadores de posición vacíos o rectángulos blancos. | La mayoría de sitios web modernos — portales de noticias, e-commerce, blogs, documentación |
| Scroll infinito | Mientras la herramienta se desplaza, la página sigue añadiendo contenido. La captura nunca llega al "final" porque no hay final — o captura un snapshot a mitad de carga con tarjetas parcialmente renderizadas. | Twitter, Instagram, Reddit, Pinterest, la mayoría de feeds sociales |
| Elementos sticky | Los encabezados fijos, barras de navegación, widgets de chat y banners de cookies se superponen al contenido en cada segmento del viewport, creando duplicados feos en la imagen final unida. | Casi cualquier sitio moderno |
Una herramienta que simplemente se desplaza y captura píxeles producirá una imagen con secciones en blanco, encabezados duplicados y contenido faltante. La solución requiere que la herramienta interactúe activamente con la página — activando cargas diferidas, esperando a que el contenido se renderice y manejando elementos fijos.
El enfoque correcto: Desplazar, esperar, capturar
Una herramienta de captura con desplazamiento correcta no solo se desplaza y atrapa píxeles. Sigue un bucle de tres pasos para cada altura de viewport de la página:
- Desplazar a la siguiente sección;
- Esperar a que el navegador termine de cargar — imágenes, fuentes, contenido dinámico. Una buena herramienta observa que la red se estabilice y el layout se asiente antes de capturar;
- Capturar ese segmento del viewport, y luego continuar.
Después de capturar todos los segmentos, la herramienta los une en una sola imagen, eliminando áreas superpuestas (como el encabezado sticky que aparece en cada segmento) y deduplicando elementos fijos.
Esto es exactamente lo que hace VKT PageShot. Su captura de página completa se desplaza incrementalmente, espera a que el contenido de carga diferida se renderice en cada sección y une el resultado en una imagen limpia y completa — sin rectángulos vacíos, sin encabezados duplicados.
Cómo capturar una página con carga diferida (Paso a paso)
Escenario: Quieres capturar una página completa de catálogo de productos, artículo de noticias o documentación que carga imágenes al desplazarte.
- Abre la página y espera a que el contenido inicial por encima del pliegue cargue completamente (imágenes, fuentes, layout);
- Haz clic en el icono de PageShot en tu barra de herramientas;
- Selecciona "Página completa" como modo de captura;
- PageShot se desplaza automáticamente. En cada altura de viewport, se pausa y espera a que las imágenes de carga diferida terminen de renderizarse antes de capturar ese segmento. Puedes observar el indicador de progreso;
- Cuando termine, la imagen de página completa se abre en el editor de vista previa de PageShot. Cada imagen, cada sección — capturada como si toda la página estuviera impresa en una sola hoja larga de papel;
- Guarda como PNG, JPG o copia al portapapeles. O exporta como PDF para archivado.
Eso es todo. Sin desplazamiento manual, sin rectángulos vacíos, sin unión manual.
Cómo capturar una página con scroll infinito (Twitter, Instagram, Reddit)
Las páginas con scroll infinito no tienen un final natural — la página sigue cargando contenido a medida que te acercas al final. Esto significa que necesitas decidir de antemano cuánto quieres capturar y precargarlo.
La estrategia:
- Desplázate manualmente hacia abajo primero. Carga tanto contenido como quieras capturar. Para un hilo de Twitter, desplázate hasta ver el último tweet que quieres. Para una sección de comentarios de Reddit, desplázate hasta llegar a los comentarios que te interesan. Cada desplazamiento activa la carga de más contenido en la página;
- Deja de desplazarte y espera unos segundos a que el último lote de contenido termine de renderizarse;
- Ahora usa la captura de página completa de PageShot. Capturará todo lo que se haya cargado — desde la parte superior de la página hasta donde dejaste de desplazarte. Como el contenido ya está cargado, no hay nada que cargar diferidamente ni nada que perder;
- Guarda o exporta.
Salvedad importante: las páginas con scroll infinito pueden ser extremadamente largas una vez que has cargado mucho contenido. Un hilo de Twitter con 200 tweets puede tener fácilmente más de 50,000 píxeles de alto. PageShot maneja páginas muy largas bien, pero el archivo de imagen resultante será grande (5–15 MB). Si solo necesitas una sección, usa el modo de captura de Área visible o Selección en su lugar.
Cómo capturar páginas con encabezados sticky (Sin duplicados)
Casi todas las páginas web modernas tienen una barra de navegación sticky — el encabezado que se queda en la parte superior de la pantalla mientras te desplazas. Cuando una herramienta de captura captura segmentos del viewport y los une, ese encabezado aparece en cada segmento individual, resultando en una imagen final con la misma barra de navegación repetida cada 800 píxeles.
La solución: un algoritmo de unión inteligente detecta qué elementos son position: fixed o position: sticky, y los mantiene solo una vez — en el primer segmento del viewport. Cada segmento subsiguiente tiene el área sticky eliminada antes de la unión.
PageShot hace esto automáticamente. No necesitas configurar nada. El encabezado sticky aparece una vez en la parte superior de la imagen final, y cada otra sección muestra solo el contenido desplazable debajo de él.
Si estás usando una herramienta diferente que no maneja elementos sticky, tienes dos alternativas:
- Override de CSS: Abre DevTools (F12), encuentra el elemento sticky y establece
position: static !important;en el panel de Estilos. Esto fuerza al encabezado a desplazarse normalmente. Luego toma tu captura. Recuerda deshacer el cambio después; - Imprimir a PDF:
Ctrl+P→ Guardar como PDF. El layout de impresión generalmente suprime los elementos sticky. Luego convierte el PDF a imagen si es necesario.
Cómo capturar páginas que bloquean capturas
Algunos sitios — particularmente plataformas de streaming, portales de exámenes online y contenido protegido por DRM — intentan prevenir capturas. El enfoque depende del tipo de bloqueo que usen:
- Bloqueo de clic derecho / menú contextual: Esto en realidad no previene las capturas. Usa el icono de la extensión en tu barra de herramientas, no el menú de clic derecho. PageShot captura a través del botón de la barra de herramientas y atajos de teclado, evitando completamente los bloqueos del menú contextual;
- Listeners de eventos JavaScript: Algunos sitios escuchan eventos de teclado (Print Screen, Ctrl+Shift+S) y los suprimen. PageShot usa las APIs
activeTabytabsde Chrome, que operan a un nivel que el JavaScript de la página no puede interceptar; - DRM / Encrypted Media Extensions: Los servicios de streaming (Netflix, Disney+) usan DRM a nivel de hardware. Las capturas de contenido de vídeo protegido por DRM aparecerán como un rectángulo negro. Esta es una restricción a nivel de navegador que ninguna extensión puede evadir — e intentar hacerlo puede violar los términos de servicio del sitio.
Para los dos primeros casos, PageShot funciona sin ninguna configuración especial. Para contenido DRM, ninguna herramienta de captura ayudará — así es por diseño.
Capturar páginas largas en móvil (vía Chrome de escritorio)
Si necesitas capturar la versión móvil de un sitio web — el layout responsivo que ven los teléfonos — puedes simularlo en los DevTools de escritorio de Chrome:
- Presiona
F12para abrir DevTools; - Haz clic en el botón Toggle Device Toolbar (icono de teléfono, o
Ctrl+Shift+M); - Selecciona un dispositivo móvil del menú desplegable (por ejemplo, iPhone 14 Pro, Pixel 7);
- Navega a tu página. El layout móvil se cargará;
- Usa la captura de página completa de PageShot normalmente. Capturará el layout responsivo móvil.
Esto es útil para archivar layouts específicos de móvil, probar diseño responsivo o capturar contenido que se ve diferente en teléfonos.
Comparación: 4 formas de capturar una página con desplazamiento
| Método | Maneja carga diferida | Maneja scroll infinito | Elimina encabezados sticky | Guarda como PDF | Costo |
|---|---|---|---|---|---|
| VKT PageShot | ✓ espera por cada sección | ✓ captura todo el contenido cargado | ✓ automático | ✓ integrado | Gratis |
| Chrome DevTools | Parcial — puede perder contenido diferido | ✗ captura solo la primera carga | ✗ duplica encabezados | ✗ solo PNG | Gratis (integrado) |
| Imprimir a PDF (Ctrl+P) | ✓ el navegador renderiza todo | ✗ solo contenido cargado | ✓ suprimido en impresión | ✓ nativo | Gratis (integrado) |
| GoFullPage | ✓ espera la carga | ✓ captura contenido cargado | ✓ maneja sticky | ✓ exportación | Gratis; Premium varía |
Cada método tiene su lugar. DevTools es rápido para una captura rápida. Imprimir a PDF es lo más simple cuando necesitas un PDF. GoFullPage es una alternativa sólida. Y PageShot combina desplazar-esperar-capturar, eliminación de encabezados sticky, anotación y exportación a PDF en una sola herramienta.
Solución de problemas: Problemas comunes de captura con desplazamiento
Rectángulos blancos donde deberían haber imágenes
La herramienta de captura se desplazó antes de que las imágenes cargaran. Solución: usa una herramienta que espere por cada sección (PageShot hace esto). Si usas DevTools, intenta desplazarte manualmente hasta el final primero para precargar todo, luego captura.
La captura se detiene demasiado pronto — falta la parte inferior de la página
La herramienta piensa que ha llegado al final, pero la página tiene más contenido. Esto ocurre a menudo con páginas que usan overflow: hidden en el body pero se desplazan en un contenedor hijo. PageShot detecta el elemento desplazable real, no solo el body.
Encabezados y barras de navegación duplicados
La herramienta no está eliminando los elementos sticky/fixed durante la unión. Usa PageShot (eliminación automática de sticky) o establece manualmente el elemento sticky a position: static en DevTools antes de capturar.
La página carga nuevo contenido durante la captura, creando una incoherencia
Algunas páginas dinámicas (dashboards en vivo, feeds en tiempo real) cambian de contenido mientras se toma la captura. Solución: pausa cualquier actualización automática o en tiempo real antes de capturar, o usa una captura de viewport único en lugar de página completa.
PageShot es gratuito — captura de página completa, área visible, selección, anotación, desenfoque mosaico y exportación a PDF. Sin marca de agua, sin subida, 100% local. Instala desde Chrome Web Store o Edge Add-ons.
Preguntas frecuentes
¿Por qué mi captura de página completa tiene secciones en blanco?
Las secciones en blanco ocurren por la carga diferida — la página solo carga imágenes y contenido cuando entran al viewport. Si la herramienta de captura se desplaza demasiado rápido o no activa el observador de carga diferida, el contenido nunca se renderiza. PageShot resuelve esto desplazándose incrementalmente, esperando a que cada sección cargue antes de capturar.
¿Puedo capturar una página con scroll infinito como Twitter o Instagram?
Sí, con una salvedad: las páginas con scroll infinito no tienen un final natural, así que necesitas decidir cuánto capturar. Primero desplázate manualmente hacia abajo para cargar el contenido que deseas, luego usa la captura de página completa de PageShot. Capturará todo lo que se haya cargado — no solo lo que es visible en pantalla.
¿Una captura con desplazamiento capturará vídeos incrustados y animaciones?
La captura captura el estado visual actual de cada sección. Los vídeos incrustados se mostrarán como un solo fotograma (el póster o la posición actual de reproducción). Las animaciones CSS se congelarán en el estado en que se encuentren cuando esa sección sea capturada. Los elementos interactivos como carruseles mostrarán la diapositiva que esté activa en ese momento.
¿Hay un límite de tamaño para las capturas de página completa?
Chrome impone un límite de tamaño de lienzo de aproximadamente 16,384 píxeles en cualquier dimensión. Para páginas extremadamente largas (decenas de miles de píxeles), algunas herramientas truncan o dividen la salida. PageShot maneja esto dividiendo automáticamente en múltiples imágenes cuando la página excede el límite, así que no se pierde nada.
La conclusión
Las páginas web modernas no son estáticas — cargan al desplazarse, añaden bajo demanda y fijan elementos al viewport. Una herramienta de captura que las trata como documentos estáticos producirá imágenes rotas. La solución es una herramienta que se desplaza con paciencia: espera por cada sección, maneja elementos sticky y une limpiamente. Eso es lo que hace PageShot, y lo hace gratis.
Más guías en el blog de VKT; preguntas a [email protected].