Scroll en CSS

El scroll es una interacción básica en la web. CSS define cómo se comporta el contenido al superar el tamaño visible y ofrece smooth scroll para mejor experiencia.

Manejo básico de scroll

Con overflow controlamos qué ocurre si el contenido excede el contenedor. Valores: visible, hidden, scroll y auto. Scroll muestra barra siempre, auto solo cuando hace falta.

Aquí un contenedor fijo con mucho texto obliga a usar scroll. Con overflow: scroll la barra siempre está visible.

Scroll suave

Scroll-behavior permite hacer scroll suave al saltar dentro de la página. Mejora la experiencia en páginas largas.

Este ejemplo muestra un enlace que baja suavemente a otra sección con scroll-behavior: smooth.

Consejos para scroll

Personalizar scroll mejora experiencia, pero cuida accesibilidad y rendimiento.

• Usa overflow: auto para mostrar la barra solo si es necesario.
• El scroll suave es bueno, pero respeta prefers-reduced-motion.
• Evita soluciones de scroll demasiado personalizadas, pueden afectar rendimiento y usabilidad.