Cómo ocultar la barra de desplazamiento

Aprende a ocultar la barra de desplazamiento usando CSS.

Cómo ocultar la barra de desplazamiento

Añadir overflow: hidden;puedes ocultar tanto la barra de desplazamiento horizontal como la vertical.

Ejemplo

body {
  overflow: hidden; /* Ocultar barras de desplazamiento */
}

Prueba por ti mismo

Si deseas ocultar solo la barra de desplazamiento vertical o solo la horizontal, usa overflow-y o overflow-x:

Ejemplo

body {
  overflow-y: hidden; /* Ocultar barra de desplazamiento vertical */
  overflow-x: hidden; /* Ocultar barra de desplazamiento horizontal */
}

Prueba por ti mismo

Ten en cuenta queoverflow: hidden También eliminará la funcionalidad de la barra de desplazamiento. No se puede desplazar dentro de la página.

Ocultar la barra de desplazamiento pero mantener la funcionalidad

Para ocultar la barra de desplazamiento pero seguir permitiendo el desplazamiento, puedes usar el siguiente código:

Ejemplo

/* Ocultar la barra de desplazamiento para Chrome, Safari y Opera */
.example::-webkit-scrollbar {
  display: none;
}
/* Ocultar la barra de desplazamiento para IE, Edge y Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

Prueba por ti mismo

El navegador Webkit (como Chrome, Safari y Opera) soporta estilos no estándar ::-webkit-scrollbar Elemento pseudo, que nos permite modificar el aspecto de la barra de desplazamiento del navegador. Soportado por IE y Edge -ms-overflow-style: Soportado por Firefox Atributo scrollbar-width Atributos, que nos permiten ocultar la barra de desplazamiento pero mantener su funcionalidad.

Páginas relacionadas

Tutoriales:CSS desbordamiento

Manual de referencia:Atributo CSS overflow