Ocultar o desactivar el desplazamiento con CSS

Use CSS según si el contenido debe recortarse, si el desplazamiento debe bloquearse por completo o si solo debe ocultarse la barra. overflow: hidden recorta el contenido desbordado y elimina la barra visible; no es un cambio meramente estético.

Elegir la regla CSS adecuada

La abreviatura overflow controla el desbordamiento horizontal y vertical. Use hidden solo cuando recortar sea intencional. Use scrollbar-width: none únicamente si la región sigue siendo desplazable y fácil de descubrir. Use overflow-x como protección después de corregir el elemento que causa el desbordamiento.

Desactivar el desplazamiento y recortar el desbordamiento

Limite el componente y establezca solo el eje necesario. Esto elimina la barra normal y recorta el contenido que queda fuera del cuadro.

<div class="preview-panel"><p>Visible text.</p><p>Extra text is clipped.</p></div>

.preview-panel { max-block-size: 8rem; overflow-y: hidden; border: 1px solid #777; padding: 1rem; }

El resultado no muestra barra vertical ni texto más allá del borde inferior. Úselo solo si el contenido recortado no es necesario o existe otro control para mostrarlo. En un modal, una clase temporal en html y body puede bloquear la página; pruebe rueda, tacto, teclado y cierre.

Ocultar la barra y conservar el desplazamiento

Si los lectores deben alcanzar todo el contenido, conserve overflow-y: auto y oculte la barra con la propiedad estándar y un fallback limitado.

.scroll-area { max-block-size: 10rem; overflow-y: auto; }
@supports (scrollbar-width: none) { .scroll-area { scrollbar-width: none; } }
@supports not (scrollbar-width: none) { .scroll-area::-webkit-scrollbar { display: none; } }

El cuadro continúa desplazándose con rueda, gesto táctil, teclado o trackpad. ::-webkit-scrollbar no es estándar. Ocultar una barra puede dificultar descubrir el desplazamiento; proporcione una señal visible o un control alternativo.

Evitar el desbordamiento horizontal

Una barra horizontal suele revelar un error de diseño: medios con ancho fijo, un elemento flex que no puede encogerse o una cadena sin cortes. Corrija primero la causa.

.page-content { max-inline-size: 100%; overflow-x: hidden; }
.page-content img, .page-content video { display: block; max-inline-size: 100%; block-size: auto; }
.page-content code { overflow-wrap: anywhere; }

overflow-x: hidden es una protección final, no un sustituto del diseño adaptable. overflow-x: clip también impide el desplazamiento programático y no debe envolver contenido interactivo necesario.

No confundir overscroll-behavior

overscroll-behavior: contain controla el encadenamiento al llegar al borde de un modal desplazable. No oculta la barra ni desactiva el desplazamiento.

Accesibilidad y notas del navegador

No oculte texto esencial, navegación, campos ni controles sin una alternativa clara. Compruebe el foco del teclado: Tab no debe llegar a contenido recortado que no pueda revelarse. overflow: hidden aún puede mostrar contenido enfocado o desplazado por script, mientras que clip no. scrollbar-gutter: stable reserva espacio, pero no oculta ni desactiva nada. Pruebe vistas estrechas y anchas, rueda, tacto, Page Down, flechas, Tab y un elemento enfocado cerca del borde.

Antes de publicar, pruebe los estados normal y restringido con ventanas estrechas y anchas. Un modal debe restaurar el desplazamiento de la página al cerrarse y su propio contenido debe seguir siendo accesible. Revise imágenes sobredimensionadas, URL largas, código preformateado e hijos flex o grid en vez de ocultar el problema recortándolo.