≡En resumen
- Scroll significa desplazamiento: mover el contenido de la pantalla para ver lo que queda fuera.
- En español puedes decir desplazarse, deslizar, bajar o pasar; «scrollear» es un anglicismo coloquial.
- Hay scroll vertical, horizontal, infinito, parallax y con ajuste (scroll snap), cada uno con usos distintos.
- El scroll infinito necesita páginas con URL propias y enlaces para que Google pueda rastrear todo el contenido.
- Medir hasta dónde baja el usuario te dice si tu contenido y tus llamadas a la acción están en el sitio correcto.
01 ¿Qué es el scroll?
La palabra viene del inglés scroll, «rollo de pergamino», documentada hacia el año 1400. Leer un rollo exigía irlo desenrollando poco a poco, y esa imagen pasó a la informática: el verbo to scroll con el sentido de «mostrar unas pocas líneas cada vez» en una pantalla está registrado desde 1981.
Hoy el scroll es el gesto más repetido en internet. En el móvil casi todo se navega desplazándose en vertical, así que buena parte del diseño UX de una web consiste en decidir qué ve el usuario a medida que baja.
02 Scroll en español: traducción y cómo decirlo
No existe una sola traducción: depende de si scroll funciona como sustantivo, como verbo o forma parte de otra expresión. En 2016 una encuesta de FundéuBBVA sobre los gestos en pantallas táctiles eligió «deslizar verticalmente» como alternativa preferida, seguida de «bajar», «navegar verticalmente» y «pasar».
| En inglés | En español | Ejemplo |
|---|---|---|
| scroll (sustantivo, historia) | rollo, pergamino | Los rollos del mar Muerto (Dead Sea Scrolls) |
| scroll (sustantivo, informática) | desplazamiento | El desplazamiento de la página es muy suave |
| to scroll / hacer scroll | desplazarse, deslizar, bajar, pasar | Desliza hacia abajo para ver más |
| scroll down / scroll up | desplazarse hacia abajo / hacia arriba | Baja hasta el final del formulario |
| scrollbar | barra de desplazamiento | La barra de la derecha indica dónde estás |
| scroll wheel | rueda del ratón | Gira la rueda para avanzar |
| infinite scroll | desplazamiento infinito | El feed carga contenido sin fin |
| doomscrolling | consumo compulsivo de malas noticias deslizando la pantalla | Pasar horas leyendo noticias negativas |
03 Cómo se hace scroll en cada dispositivo
Ratón
Con la rueda central, que Microsoft popularizó con el IntelliMouse en 1996. Pulsándola en muchos navegadores activas el desplazamiento automático.
Panel táctil
Deslizando dos dedos. En macOS el «desplazamiento natural» mueve el contenido en la misma dirección que los dedos, como en el móvil.
Pantalla táctil
Deslizando un dedo; un gesto rápido lanza el contenido con inercia y un toque lo detiene.
Teclado
Flechas para avanzar poco, Av Pág y Re Pág por pantallas, la barra espaciadora para bajar e Inicio o Fin para ir a los extremos.
04 Tipos de scroll en diseño web
| Tipo | Qué es | Buen uso | Riesgo |
|---|---|---|---|
| Vertical | Desplazamiento de arriba abajo, el estándar | Casi cualquier página | Contenido clave demasiado abajo |
| Horizontal | El contenido se mueve de lado | Carruseles de productos, galerías | Que el usuario no descubra que puede deslizar |
| Infinito | Se carga más contenido al llegar al final | Redes sociales, feeds, galerías de inspiración | No se llega al pie de página; problemas de SEO |
| Parallax | Capas que se mueven a distinta velocidad | Landing pages y storytelling visual | Mareo, lentitud en móviles |
| Con ajuste (scroll snap) | El desplazamiento se detiene en puntos concretos | Carruseles, presentaciones a pantalla completa | Sensación de pérdida de control |
| Animado por scroll | Animaciones ligadas a la posición del desplazamiento | Explicar un producto por pasos | Distrae y penaliza el rendimiento si se abusa |
El efecto parallax y las animaciones ligadas al desplazamiento pueden hacer memorable una página, pero conviene respetar la preferencia de movimiento reducido del sistema operativo para quien se marea con ellas.
05 Scroll, experiencia de usuario y conversión
Lo que el usuario ve antes de desplazarse, lo que se conoce como above the fold, decide si se queda o se va. Pero la idea de que «nadie hace scroll» está superada: en móvil los usuarios bajan con naturalidad si lo que ven arriba les convence de que merece la pena.
- ✓Coloca arriba la propuesta de valor y una llamada a la acción clara.
- ✓Repite la llamada a la acción a lo largo de las páginas largas.
- ✓Usa titulares y subtítulos que permitan leer en diagonal mientras se baja.
- ✓Evita falsos finales: bandas vacías o bloques que parecen el pie de página.
- ✓Indica que hay más contenido: flechas, tarjetas cortadas o una barra de progreso de lectura.
- ✓No secuestres el scroll con efectos que cambian su velocidad o dirección.
- ✓Añade un botón para volver arriba en páginas muy largas.
Herramientas como Microsoft Clarity o Hotjar muestran qué porcentaje de visitantes llega a cada altura de la página. Si solo el 30 % alcanza tu formulario, súbelo o repite el botón más arriba. Lo explicamos en la guía de mapas de calor web, una herramienta básica para la optimización de la conversión.
06 Scroll infinito y SEO
El scroll infinito resulta cómodo, pero Googlebot no desplaza la página ni pulsa botones de «cargar más», así que el contenido que solo aparece al bajar puede quedar sin rastrear. Google recomienda combinarlo con paginación accesible.
-
1
Da a cada bloque una URL propia
Por ejemplo, con el parámetro ?page=2, ?page=3… y actualiza la URL al cargar cada tramo.
-
2
No uses fragmentos #
Google ignora lo que va detrás de la almohadilla, así que #pagina2 no sirve como URL independiente.
-
3
Enlaza las páginas con a href
Incluye enlaces secuenciales rastreables entre páginas. Las etiquetas rel=next y rel=prev ya no las usa Google.
-
4
Comprueba el rastreo
Revisa en Search Console que las páginas profundas se indexan y que los productos del final también reciben visitas.
07 Cómo controlar el scroll con CSS y JavaScript
Buena parte del comportamiento del desplazamiento se controla con CSS, sin necesidad de librerías pesadas:
html { scroll-behavior: smooth; } hace suave el salto a los anclajes internos..carrusel { overflow-x: auto; scroll-snap-type: x mandatory; } y .tarjeta { scroll-snap-align: start; } crean un carrusel que se detiene en cada tarjeta.header { position: sticky; top: 0; } fija la cabecera al desplazarse..modal { overscroll-behavior: contain; } evita que el scroll de un modal arrastre la página de fondo.
En JavaScript, la API IntersectionObserver detecta cuándo un elemento entra en pantalla sin escuchar cada evento de scroll, lo que ahorra batería y mejora el rendimiento. Es la base de la carga diferida de imágenes y de un scroll infinito eficiente.
Preguntas frecuentes sobre Scroll
Significa desplazamiento: mover el contenido de una pantalla hacia arriba, abajo o a los lados para ver lo que no cabe. En su origen, en inglés, scroll es un rollo de pergamino.
Como sustantivo, desplazamiento. Para el verbo «hacer scroll» puedes usar desplazarse, deslizar, bajar o pasar; FundéuBBVA destacó «deslizar verticalmente» para el gesto en pantallas táctiles.
Es desplazarte por una página o una app con la rueda del ratón, el panel táctil, el dedo o el teclado para ver más contenido.
Es un diseño en el que se carga contenido nuevo automáticamente al llegar al final, como en los feeds de redes sociales. Es cómodo, pero dificulta llegar al pie de página y necesita paginación con URL propias para el SEO.
Es la barra de desplazamiento, normalmente a la derecha de la ventana, que indica en qué parte del contenido estás y permite moverte arrastrándola.
Es el hábito de pasar mucho tiempo deslizando la pantalla para consumir noticias o publicaciones negativas, a menudo de forma compulsiva.
Google Analytics 4 registra un evento scroll cuando el usuario alcanza el 90 % de la página, y herramientas como Microsoft Clarity o Hotjar muestran mapas con el porcentaje de visitantes que llega a cada altura.
Suele deberse a un estilo CSS como overflow: hidden en el body, que se aplica al abrir un menú o un modal y no se retira al cerrarlo, o a un script que intercepta el evento de desplazamiento. Recargar la página o probar otro navegador ayuda a descartar extensiones.
Fuentes consultadas
Sobre el autor
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil y artículos → Ver perfil en LinkedIn ↗