Cómo - Ocultar barra de desplazamiento
Aprende a ocultar las barras de desplazamiento con CSS.
Cómo ocultar las barras de desplazamiento
Agregue overflow: hidden;
para ocultar la barra de desplazamiento horizontal y vertical.
Ejemplo
body {
overflow: hidden; /* Hide scrollbars */
}
Para ocultar solo la barra de desplazamiento vertical, o solo la barra de desplazamiento horizontal, use overflow-y
o overflow-x
:
Ejemplo
body {
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
Tenga en cuenta que overflow: hidden
también eliminará la funcionalidad de la barra de desplazamiento. No es posible desplazarse dentro de la página.
Sugerencia: para obtener más información sobre la overflow
propiedad, vaya a nuestro Tutorial de desbordamiento de CSS o Referencia de propiedad de desbordamiento de CSS .
Oculte las barras de desplazamiento pero mantenga la funcionalidad
Para ocultar las barras de desplazamiento, pero aún poder seguir desplazándose, puede usar el siguiente código:
Ejemplo
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar
for IE, Edge and Firefox */
.example {
-ms-overflow-style: none; /*
IE and Edge */
scrollbar-width: none; /* Firefox */
}
Los navegadores Webkit, como Chrome, Safari y Opera, admiten el ::-webkit-scrollbar
pseudoelemento no estándar, que nos permite modificar el aspecto de la barra de desplazamiento del navegador. IE y Edge admiten la -ms-overflow-style:
propiedad, y Firefox admite la scrollbar-width
propiedad, lo que nos permite ocultar la barra de desplazamiento, pero mantener la funcionalidad.