Saltar al contenido

Cómo ocultar las barras de desplazamiento con CSS

septiembre 29, 2021

Aprenda a ocultar las barras de desplazamiento con CSS.


Cómo ocultar las barras de desplazamiento

Agregar overflow: hidden; para ocultar la barra de desplazamiento horizontal y vertical.

Para ocultar solo la barra de desplazamiento vertical, o solo la barra de desplazamiento horizontal, utilice overflow-y o overflow-x:

Ejemplo

cuerpo {
desbordamiento-y: oculto; / * Ocultar barra de desplazamiento vertical * /

overflow-x: oculto; / * Ocultar barra de desplazamiento horizontal * /
}

Inténtalo tú mismo »


Ocultar barras de desplazamiento pero mantener la funcionalidad

Para ocultar las barras de desplazamiento, pero poder seguir desplazándose, puede utilizar el siguiente código:

Ejemplo

/ * Ocultar barra de desplazamiento para Chrome, Safari y Opera * /
.example :: – webkit-scrollbar {
pantalla: ninguna;
}

/ * Ocultar la barra de desplazamiento para IE, Edge y Firefox * /
.ejemplo {
-ms-overflow-style: ninguno; / * IE y Edge * /
ancho de barra de desplazamiento: ninguno; / * Firefox * /
}

Inténtalo tú mismo »

Los navegadores Webkit, como Chrome, Safari y Opera, son compatibles con los ::-webkit-scrollbar pseudoelemento, que nos permite modificar el aspecto de la barra de desplazamiento del navegador. IE y Edge son compatibles con -ms-overflow-style: propiedad, y Firefox admite la scrollbar-width propiedad, que nos permite ocultar la barra de desplazamiento, pero mantener la funcionalidad.

close