Retire el CSS horizontal de barra de desplazamiento
Por qué quitar la barra de desplazamiento?
Aunque no se recomienda en el diseño web para cambiar el comportamiento predeterminado del navegador, hay momentos en los que es necesario. Por ejemplo, una barra de desplazamiento que surge una vez que el contenido de un elemento se desborda puede ser difícil de percibir si ocupa una pequeña porción de una página web. Además, eliminar la barra de desplazamiento por completo tiene sentido porque, como diseñador web, es posible que no piense en desplazarse en una página web. Independientemente de la justificación para la ocultación de la barra de desplazamiento de CSS, se debe considerar la compatibilidad del navegador cruzado. Además, después de ocultar la barra de desplazamiento, una vista previa del sitio web para asegurarse de que funcione según lo previsto en los dispositivos de escritorio y móviles.
Eliminar la barra de desplazamiento en CSS:
El contenido que excede los límites de su contenedor se puede manejar utilizando el atributo de desbordamiento en CSS. Si el contenido de un elemento es más grande que el espacio disponible, puede usar esta propiedad para recortar, ocultar o desplazar el contenido. Las características para manejar el desbordamiento desplazable en medios visuales se incluyen en este módulo CSS. En CSS, el desbordamiento ocurre cuando el contenido de un contenedor pasa uno o más de los bordes del contenedor. En esencia, especifica lo que ocurre cuando el contenido de un elemento es demasiado grande para encajar dentro de su contexto de bloqueo.
La propiedad de exceso de flujo de CSS admite los siguientes valores:
auto: Para agregar una barra de desplazamiento, pero solo lo hará si el contenido excede el área desplazable.
visible: Para permitir que el contenido se muestre incluso cuando se desborda.
Desplazarse: Para recortar el contenido y ver el contenido restante, agregará una barra de desplazamiento.
oculto: Mostrará el contenido visible, y el contenido restante se ocultará.
acortar: Pina el contenido de un elemento a su caja.
Podemos establecer los valores de la barra de desplazamiento con Overflow-X para controlar la barra de desplazamiento horizontal, Overflow-Y para la barra de desplazamiento vertical y el desbordamiento admitirán ambos.
Ejemplo 01: Ocultar la barra de desplazamiento horizontal en CSS
Comencemos con el ejemplo básico de eliminar la barra de desplazamiento de la página web utilizando CSS. Desafortunadamente, no hay una regla CSS específica que se pueda usar para que la barra de desplazamiento desaparezca y, sin embargo, permita a los usuarios desplazar una página o elemento. Con el uso de algunas reglas de CSS específicas del navegador, esto todavía es factible. Aplique los siguientes CSS al cuerpo de la página web (para la página completa) o un solo elemento para ocultar o eliminar la barra de desplazamiento y mantener la funcionalidad de desplazamiento.
Como se vio anteriormente, podemos usar diferentes formas de hacer que las barras de desplazamiento desaparezcan en diferentes navegadores. En el ejemplo anterior, el elemento es un área o selector específico del que desea eliminar las barras de desplazamiento. En este ejemplo, crearemos una página de muestra simple para mostrarle cómo puede ocultar la barra de desplazamiento horizontal, pero su funcionalidad de desplazamiento funcionará. Crearemos una página de la página web usando> etiquetas. Dentro de estas etiquetas, crearemos elementos de cabeza y cuerpo para definir la raíz y el cuerpo del elemento.
El atributo 'Display: Ninguno' hará que la barra desaparezca sin afectar su funcionalidad de desplazamiento.
Para ocultar la barra de desplazamiento horizontal, permitiremos que nuestro contenido exceda el límite horizontal de la página. Para esto usaremos "White-Space: Nowrap;" Esto permitirá que el texto permanezca en la misma línea hasta que usemos la etiqueta de línea de interrupción. En los navegadores más antiguos como 'Internet Explorer', estableceremos el 'atributo -ms-Overflow Style: Ninguno'. Mientras que en los navegadores modernos, como en Firefox, podemos usar 'Width-Width: Ninguno' y para Chrome y otros navegadores modernos, 'Display: Ninguno' se puede usar. Cuando el contenido se extiende más allá de los límites horizontales del elemento a nivel de bloque, la propiedad CSS Overflow-X determina qué se muestra.
Podemos hacer lo mismo para los elementos Div utilizando selectores DIV en CSS.
Usando el código anterior, obtendremos una página web de la siguiente manera:
Como puede ver, esto es lo mismo que el anterior, pero esta vez utilizamos los selectores DIV para ocultar las barras de desplazamiento de los contenedores. Hemos estilizado el DIV especificando que su borde sea 5px Solid Black, Border-Radius 5px, altura de 150px y el ancho del recipiente Div para ser 300px.
Ejemplo 02: eliminar la barra de desplazamiento y deshabilitar su funcionalidad en CSS
A través de su función de desbordamiento CSS, CSS permite la capacidad de desaparecer tanto la barra de desplazamiento como para desactivar el desplazamiento. El manejo del contenido que excede los límites de su contenedor es administrado por estas propiedades. Ocultar la barra de desplazamiento horizontal puede ser útil porque el desplazamiento horizontal es a menudo una elección terrible. Al usar 'Overflow-X: Oculto', podemos hacer que la barra de desplazamiento horizontal desaparezca y detenga el desplazamiento horizontal. Simplemente agregamos la regla 'desbordamiento: oculta' al cuerpo de un elemento contenedor para dejar de desplazarse mientras usa este atributo. Esto ocultará todo el material que se extiende más allá del límite del elemento.
Al usar este código, nuestra barra de desplazamiento horizontal desaparecerá y no podremos desplazarnos a la izquierda o a la derecha.
Como puede ver, el uso de 'Overflow-X: Hidden' ha eliminado la barra de desplazamiento horizontal, así como la funcionalidad para desplazarse hacia la izquierda o hacia la derecha.
Sin embargo, para mostrar material que extienda los límites del contenedor, use el desbordamiento: visible como alternativa.
Como puede ver, la imagen excede los límites del contenedor.
Ejemplo 03: Eliminar la barra de desplazamiento horizontal hasta que lo necesitemos
En algunas situaciones, ocultar la barra de desplazamiento podría mejorar su diseño. En otros casos, eliminar esta parte de la página puede empeorar la experiencia del usuario. La mayoría de los visitantes conectan una barra de desplazamiento con la acción de desplazarse. Por lo tanto, podría parecer inusual para los demás si usa esta técnica en todo el sitio web. Además, las barras de desplazamiento indican cuánto de la página aún es visible. La falta de una barra de desplazamiento puede ser desagradable a menos que tenga otra señal visual de que aún hay más contenido para ver. Las pruebas de usuario pueden revelar cómo la ausencia de una barra de desplazamiento afecta la experiencia del usuario de su sitio, aunque en muchas situaciones, ocultar la barra de desplazamiento hasta que el usuario comience a desplazarse es un compromiso inteligente.
Como el desbordamiento se establece en auto, las barras no aparecerán si el contenido no es más grande que los límites de la ventana del navegador.
Como puede ver, no hay barra de desplazamiento horizontal ya que el límite no se ha superado. Cuando se exceda el límite, la barra de desplazamiento aparecerá en la pantalla para desplazarse.
Como puede ver en el código HTML, el contenido en
es más grande que el ejemplo anterior, por lo que la barra de desplazamiento horizontal aparecerá en la parte inferior.
La configuración automática agrega la barra de desplazamiento, pero no aparecerá a menos que haya un desbordamiento de contenido. Como resultado, la barra de desplazamiento oculta solo aparece cuando es necesario.
Conclusión
Dado que facilita la navegación, la barra de desplazamiento es un indicador visual útil para la mayoría de los visitantes. Sin embargo, en algunas circunstancias, puede ocultarlo a propósito para mejorar o cambiar su diseño. Con solo unos pocos principios de nuestro artículo, puede usar CSS para ocultar la barra de desplazamiento en una página o elemento HTML. En este tutorial, hemos aprendido a ocultar la barra de desplazamiento y cómo funciona esta característica en diferentes navegadores. Ahora, después de completar este tutorial, debería poder eliminar fácilmente las barras de desplazamiento usted mismo.