Ocultar barra de desplazamiento en CSS
-
Establezca
displayennonepara el pseudoelemento::-webkit-scrollbarpara ocultar la barra de desplazamiento en CSS -
Establecer
scrollbar-widthanonepara ocultar la barra de desplazamiento en CSS
Este tutorial presentará algunos métodos para ocultar la barra de desplazamiento en una página web mientras se sigue desplazando por la página web.
Establezca display en none para el pseudoelemento ::-webkit-scrollbar para ocultar la barra de desplazamiento en CSS
Podemos usar el selector de pseudo-elemento ::-webkit-scrollbar para diseñar la barra de desplazamiento del elemento en CSS. Sin embargo, este selector solo está disponible en navegadores basados en Webkit, incluidos Chrome, Opera, Safari, Edge, etc. Podemos usar el pseudoelemento ::-webkit-scrollbar para seleccionar toda la barra de desplazamiento de la página web y configurar la propiedad display a none. Nos permitirá desplazarnos por la página web larga, pero ocultará la barra de desplazamiento.
Por ejemplo, cree un archivo PHP y escriba la estructura HTML básica en el archivo. Dentro de la sección body, abra la etiqueta PHP <?php y escriba un texto Hello World en la variable $text. Repita la variable 100 veces y muestre el texto. En CSS, use el pseudo-elemento ::-webkit-scrollbar para seleccionar la barra de desplazamiento. Luego, establezca la propiedad display en none.
En el ejemplo anterior, usamos PHP para recorrer el texto 100 veces para que la página web se vuelva larga para desplazarse por la página web. El código PHP hace que el texto Hello World se imprima 100 veces en una nueva línea. Establecer la propiedad de visualización en none oculta la barra de desplazamiento, lo que aún nos permite desplazarnos por la página. Por lo tanto, podemos lograr la función de barra de desplazamiento oculta.
Código de ejemplo:
<body>
<?php
$text = "Hello World";
for($i=0; $i<100; $i++){
echo $text. "<br>";
</body>
}
?>
::-webkit-scrollbar {
display: none;
}
Establecer scrollbar-width a none para ocultar la barra de desplazamiento en CSS
Podemos usar la propiedad scrollbar-width y establecerla en none para ocultar la barra de desplazamiento en CSS. Ocultará la barra de desplazamiento de la página web. La otra opción, auto, establece la barra de desplazamiento predeterminada, y la opción thin hará que la barra de desplazamiento parezca más delgada según el navegador. Sin embargo, la propiedad solo funciona para el navegador Firefox. Usaremos la propiedad overflow-y para mantener la funcionalidad de desplazamiento recortando el contenido. Funciona cuando un elemento a nivel de bloque se desborda en la parte superior y en los bordes del botón. Podemos usar el mismo script PHP que el primer método para demostrar la desactivación de la barra de desplazamiento.
Por ejemplo, cree un div con la clase container. Dentro de div, repita el texto como en el primer método. En CSS, dé un color de fondo junto con algo de ancho y alto al contenedor. Establezca la propiedad scrollbar-width en none y establezca la propiedad overflow-y en scroll.
En el siguiente ejemplo, si configura el scrollbar-width en none ocultará la barra de desplazamiento, y el conjunto de overflow-y en scroll mantendrá viva la función de desplazamiento. De esta forma, podemos desplazarnos por una página larga ocultando la barra de desplazamiento.
Código de ejemplo:
<body>
<div class="container">
<?php
$text = "Hello World";
for($i=0; $i<100; $i++){
echo $text. "<br>";
}
?>
</div>
</body>
.container {
scrollbar-width: none;
background-color: #bbb;
width: 500px;
height: 600px;
overflow-y: scroll;
}
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn