Diseñar un sitio web exactamente como lo desea a menudo implica eliminar el exceso: algunos espacios aquí, un subrayado allá o, en el caso actual, una barra de desplazamiento.
Ya sea por razones funcionales o de diseño, es fácil ocultar la barra de desplazamiento en una página o elemento de página con un poco de CSS. Hay varias formas de hacer esto: ocultar la barra de desplazamiento cuando permite el desplazamiento, ocultarla cuando deshabilita el desplazamiento y ocultar la barra de desplazamiento solo hasta que la necesite, algunas de las cuales funcionarán mejor según el caso.
Para satisfacer sus necesidades de diseño, todos estos métodos se tratarán en esta guía. Empecemos.
Cómo ocultar la barra de desplazamiento en CSS (pero permitir el desplazamiento)
Desafortunadamente, no existe una sola regla de CSS dedicada que oculte la barra de desplazamiento mientras conserva el desplazamiento de página/elemento. Sin embargo, esto es posible gracias a algunas reglas CSS específicas del navegador. Para ocultar la barra de desplazamiento y mantener la funcionalidad de desplazamiento, aplique el siguiente CSS al contenido (por página) o a un elemento específico.
/* hide scrollbar but allow scrolling */
element {
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* for Firefox */
overflow-y: scroll;
}element::-webkit-scrollbar {
display: none; /* for Chrome, Safari, and Opera */
}
…dónde elemento es el selector que desea orientar. Así es como se ve este código cuando se aplica a toda la página:
ver la pluma Ocultar la barra de desplazamiento en CSS pero permitir el desplazamiento (contenido) de Christina Perricone (@hubspot) en CódigoPen.
Y aquí está el mismo código aplicado a un
ver la pluma Ocultar la barra de desplazamiento en CSS pero permitir el desplazamiento (div) de Christina Perricone (@hubspot) en CódigoPen.
Por lo general, aparece una barra de desplazamiento en ambos casos, pero nuestra política evita que esto suceda en los navegadores web populares.
Cómo ocultar la barra de desplazamiento en CSS (y evitar que se desplace)
Para ocultar la barra de desplazamiento y deshabilitar el desplazamiento, podemos usar la propiedad de desbordamiento de CSS. Esta propiedad especifica qué hacer con el contenido que se extiende más allá de los límites del contenedor.
Para evitar el desplazamiento con esta propiedad, simplemente aplique la regla desbordamiento: oculto al contenido (para toda la página) o a un elemento contenedor. Oculta todo el contenido más allá de los límites del elemento. Alternativamente, use transferencia: visible para mostrar contenido que se extiende más allá de los límites del contenedor.
ver la pluma Oculte la barra de desplazamiento en CSS y evite el desplazamiento (desbordamiento: oculto) de Christina Perricone (@hubspot) en CódigoPen.
Desactiva el desplazamiento vertical y horizontal. Como veremos a continuación, también puede desactivar el desplazamiento solo horizontal o solo vertical.
Cómo ocultar la barra de desplazamiento vertical en CSS
Para ocultar la barra de desplazamiento vertical y evitar el desplazamiento vertical, use desbordamiento-y: oculto al igual que:
ver la pluma Oculte la barra de desplazamiento en CSS y evite el desplazamiento (desbordamiento-y: oculto) de Christina Perricone (@hubspot) en CódigoPen.
Cómo ocultar la barra de desplazamiento horizontal en CSS
Dado que el desplazamiento horizontal suele ser una mala idea, esta regla general puede resultar útil. Para ocultar la barra de desplazamiento horizontal y evitar el desplazamiento horizontal, use desbordamiento-x: oculto:
ver la pluma Oculte la barra de desplazamiento en CSS y evite el desplazamiento (desbordamiento-x: oculto) de Christina Perricone (@hubspot) en CódigoPen.
Cómo ocultar la barra de desplazamiento hasta que sea necesario
En algunos casos, ocultar la barra de desplazamiento puede ayudar con el diseño. Pero en otros, eliminar esta parte de la página puede dañar la experiencia del usuario.
La mayoría de los visitantes asocian la acción de desplazarse con la barra de desplazamiento visible. Entonces, si aplica este método a una página completa, puede parecer extraño para algunos. Además, las barras de desplazamiento nos dicen cuántas páginas quedan por ver (a menos que se implemente el desplazamiento infinito). A menos que tenga otro indicador visual de que queda más contenido por ver, la falta de una barra de desplazamiento puede ser desalentadora.
Las pruebas de usuario pueden explicar cómo la falta de una barra de desplazamiento afecta la experiencia del usuario del sitio web, pero una buena compensación en muchos casos es ocultar la barra de desplazamiento hasta que el usuario comience a desplazarse. Para habilitar esto en CSS, use desbordamiento: automático regla.
ver la pluma Oculte la barra de desplazamiento hasta que la necesite de Christina Perricone (@hubspot) en CódigoPen.
Ocultar la barra de desplazamiento con CSS
Ya sea que esté creando una página con CSS puro o con un marco como Bootstrap, solo se necesitan algunas reglas para ocultar la barra de desplazamiento en la página.
Pero recuerda que el hecho de que puedas no significa que debas hacerlo. Para muchos usuarios, la barra de desplazamiento es una indicación visual conveniente que respalda la navegación. Si tiene la intención de eliminarlo, asegúrese de hacerlo intencionalmente y de una manera amigable con el diseño.
