Sin duda, el desplazamiento juega un papel vital en las aplicaciones web. Sin embargo, es posible que no necesite esa barra de desplazamiento en su página en algún momento. Por ejemplo, si el contenedor cubre solo el veinticinco por ciento de una página web y está alineada a la izquierda, la barra de desplazamiento adicional seguramente entrará en el centro. En tal situación, puede usar algunas propiedades CSS para deshabilitar la barra de desplazamiento.

Este artículo cubrirá el método para deshabilitar la barra de desplazamiento en CSS.

Cómo deshabilitar la barra de desplazamiento en CSS?

Para deshabilitar la barra de desplazamiento en una página, use las siguientes propiedades de CSS:

• desbordamiento (Desactivar la barra de desplazamiento vertical)
• desbordamiento (Desactivar la barra de desplazamiento horizontal)
• Desbordamiento (Desactivar barras de desplazamiento vertical y horizontal)

Exploremos cada propiedad CSS una por una.

Método 1: Use la propiedad de desbordamiento para deshabilitar la barra de desplazamiento vertical en CSS

El "desbordamiento"La propiedad especifica qué sucederá si el contenido no se ajusta al contenedor de manera que. También se utiliza para mostrar el contenido de desbordamiento de un elemento a nivel de bloque y para agregar o deshabilitar una barra de desplazamiento.

Entonces, tomemos un ejemplo para verificar el procedimiento de deshabilitar la barra de desplazamiento vertical con la ayuda de la propiedad CSS de desbordamiento.

Ejemplo

Para nuestra página HTML, deshabilitaremos la barra de desplazamiento vertical presente en el lado derecho:

Coloque los elementos HTML deseados, como en nuestro caso, agregaremos un rumbo en el ""Etiqueta del archivo HTML:

Deshabilitar la barra de desplazamiento

Para ocultar la barra de desplazamiento vertical, configure el "desbordamiento"Propiedad a"oculto". La altura y el ancho de "200%"Se utilizará para hacer que la página sea más y más amplia. Así es como obtendremos intencionalmente las barras de desplazamiento en nuestra página:

Guarde el código proporcionado y ejecute su archivo HTML en el navegador:

Como puede ver, hemos deshabilitado con éxito la barra de desplazamiento vertical utilizando la propiedad CSS Overflow-y.

Método 2: Use la propiedad Overflow-X para deshabilitar la barra de desplazamiento horizontal en CSS

Cuando el contenido no encaja en el contenedor de manera ancha, el "desbordamiento"La propiedad se utiliza para administrar tales escenarios. Establece lo que se muestra cuando el contenido agregado desborda los bordes de un elemento de nivel de bloque de bloqueo derecho e izquierdo. Esta propiedad CSS también se puede utilizar para deshabilitar la barra de desplazamiento horizontal.

Ejemplo

Ahora deshabilitaremos la barra de desplazamiento horizontal de nuestra página HTML:

Para ocultar la barra de desplazamiento horizontal, configure el "desbordamiento a "oculto"Y agregue el valor de las propiedades de altura y ancho como se indica en el ejemplo anterior:

Producción

Quiere deshabilitar barras horizontales y verticales a la vez? Si es así, siga la siguiente sección!

Método 3: Use la propiedad de desbordamiento para deshabilitar las barras de desplazamiento vertical y horizontal en CSS

Cuando el contenido no encaja en el contenedor horizontal y verticalmente, el "Desbordamiento"La propiedad especifica si se debe agregar barras de desplazamiento o recortar el contenido. También puede usar esta propiedad CSS para deshabilitar las barras de desplazamiento vertical y horizontal simultáneamente.

Ejemplo

En el mismo archivo HTML, agregaremos el "Desbordamiento"Propiedad y asignarlo un"oculto" valor. Esto deshabilitará la barra de desplazamiento para ambos lugares, horizontal y verticalmente:

Producción

Hemos ofrecido instrucciones sobre la discapacidad de las barras de desplazamiento utilizando diferentes propiedades de CSS.

Conclusión

Para deshabilitar las barras de desplazamiento en CSS, puede usar "desbordamiento","desbordamiento", y el "Desbordamiento" propiedades. La propiedad Overflow-X se utiliza específicamente para deshabilitar la barra de desplazamiento vertical y la propiedad de desbordamiento para deshabilitar las barras de desplazamiento horizontal. Además, la propiedad de desbordamiento ayuda a deshabilitar las barras verticales y horizontales a la vez. Este artículo discutió los métodos para deshabilitar las barras de desplazamiento en CSS.