Cómo ocultar la barra de desplazamiento en CSS
Entre las muchas formas de ocultarlo, lo más común es el desbordamiento y las propiedades WebKit-Scrollbar.
Aquí hay algunos ejemplos prácticos en los que ocultaremos la barra de desplazamiento utilizando estas propiedades.
Muy bien, comencemos!
Hide la barra de desplazamiento usando la propiedad de desbordamiento en CSS
El "Desbordamiento"La propiedad determina cómo se verá el contenido cuando se desborda del cuadro de contenido, por ejemplo, recortando, mostrando barras de desplazamiento o mostrando fuera de la caja.
Sintaxis
En CSS, la propiedad de desbordamiento tiene la siguiente sintaxis:
desbordamiento: valorEn el lugar de valor, podemos establecer diferentes valores/parámetros de propiedades de desbordamiento, como visibles, ocultas, desplazadas, automáticas y heredar. Asignar el "oculto"Valor a la propiedad de desbordamiento para ocultar la barra de desplazamiento.
Aquí hay un ejemplo práctico que ilustra este concepto de una mejor manera.
Ejemplo: cómo ocultar la barra de desplazamiento en CSS utilizando la propiedad de desbordamiento?
Creemos un párrafo dentro del uso del
Etiqueta de la siguiente manera:
Nos desplazamos hacia arriba y la izquierda de la página web mientras navegamos por la web utilizando la barra de desplazamiento que aparece vertical y horizontalmente. En html aparece de forma predeterminada. Usando CSS podemos establecer atributos de la barra de desplazamiento según nuestra elección I.E ancho de la barra de desplazamiento y color también. También escondemos la barra de desplazamiento, usando CSS.
Entre las muchas formas de ocultarlo, las más comunes están las propiedades de desbordamiento, ancho de barra de desplazamiento y webkit-scrollbar.
El resultado del código dado será:
Aquí, podemos ver que la barra de desplazamiento aparece verticalmente. Usemos la propiedad de desbordamiento CSS para ocultarla.
En CSS, escriba el siguiente código y establezca la propiedad de desbordamiento en "oculto":
cuerpodesbordamiento: oculto;
Como resultado, la barra de desplazamiento desaparecerá de la página:
Podemos ver que la barra de desplazamiento se ha eliminado, pero la funcionalidad de la barra de desplazamiento también está deshabilitada. Sin embargo, al usar CSS, podemos ocultar la barra de desplazamiento sin deshabilitar su funcionalidad.
Hide la barra de desplazamiento en CSS utilizando la propiedad "WebKit-Scrollbar"
El "webkit-scrollbarSe puede usar pseudo-elemento para diseñar el bar de desplazamiento de un elemento en CSS. También nos ayuda a esconder la barra de desplazamiento. Esta propiedad solo funciona en navegadores basados en WebKit, como Chrome, Opera, Safari, Edge, etc.
Sintaxis
Para comprender la propiedad WebKit, primero debemos comprender su sintaxis:
Body ::-Webkit/ *pantalla, ancho, estilo */
WebKit tiene los siguientes elementos que sirven diferentes funcionalidades. Algunas son:
- WebKit-Scrollbar: Se usa para modificar toda la barra de desplazamiento.
- webkit-scrollbar-botton: Se usa para modificar los botones izquierdo-derecha de la barra de desplazamiento.
- WebKit-Scrollbar-Track: Se usa para modificar la pista de desplazamiento.
- WebKit-Scrollbar-Thumb: Se usa para modificar el mango de desplazamiento arrastrable.
- WebKit-rese: Se usa para cambiar el tamaño o modificar un mango arrastrable.
Para ocultar la barra de desplazamiento, la "webkit-scrollbarSe utiliza el pseudo-elemento.
Ejemplo: cómo ocultar la barra de desplazamiento en CSS utilizando la propiedad WebKit?
Para ocultar la barra de desplazamiento usando el "webkit-scrollbar"Propiedad, establezca el valor de la pantalla en"ninguno" como a continuación:
Body ::-WebKit-ScrollbarPantalla: ninguno;
Ahora, en la página web, podemos desplazarnos a través de la larga página web sin ver la barra de desplazamiento:
La barra de desplazamiento se ha ocultado y puede desplazarse por el contenido del navegador utilizando las teclas hacia arriba.
Conclusión
El CSS "Desbordamiento" y "webkit"Las propiedades nos permiten ocultar la barra de desplazamiento de la página web. La propiedad de desbordamiento también deshabilita la funcionalidad del desplazamiento; Sin embargo, la propiedad WebKit permite desplazarse con la ayuda de las teclas de flecha. Este artículo explicó cómo funcionan la propiedad de desbordamiento y la propiedad WebKit en CSS.