Masquer la barre de défilement en CSS
-
Définissez
displaysurnonepour le pseudo-élément::-webkit-scrollbarpour masquer la barre de défilement en CSS -
Définissez
scrollbar-widthsurnonepour masquer la barre de défilement dans CSS
Ce didacticiel présentera quelques méthodes pour masquer la barre de défilement dans une page Web tout en faisant défiler la page Web.
Définissez display sur none pour le pseudo-élément ::-webkit-scrollbar pour masquer la barre de défilement en CSS
Nous pouvons utiliser le sélecteur de pseudo-élément ::-webkit-scrollbar pour styliser la barre de défilement de l’élément en CSS. Cependant, ce sélecteur n’est disponible que dans les navigateurs basés sur Webkit, notamment Chrome, Opera, Safari, Edge, etc. Nous pouvons utiliser le pseudo-élément ::-webkit-scrollbar pour sélectionner l’intégralité de la barre de défilement de la page la propriété display à none. Cela nous permettra de faire défiler la longue page Web, mais cela masquera la barre de défilement.
Par exemple, créez un fichier PHP et écrivez la structure HTML de base dans le fichier. Dans la section body, ouvrez la balise PHP <?php et écrivez un texte Hello World dans la variable $text. Bouclez la variable 100 fois et affichez le texte. En CSS, utilisez le pseudo-élément ::-webkit-scrollbar pour sélectionner l’ascenseur. Ensuite, définissez la propriété display sur none.
Dans l’exemple ci-dessus, nous avons utilisé PHP pour boucler le texte 100 fois afin que la page Web devienne longue pour faire défiler la page Web. Le code PHP provoque l’impression du texte Hello World 100 fois dans une nouvelle ligne. La définition de la propriété display sur none masque la barre de défilement, ce qui nous permet toujours de faire défiler la page. Ainsi, nous pouvons obtenir la fonction de barre de défilement cachée.
Exemple de code :
<body>
<?php
$text = "Hello World";
for($i=0; $i<100; $i++){
echo $text. "<br>";
</body>
}
?>
::-webkit-scrollbar {
display: none;
}
Définissez scrollbar-width sur none pour masquer la barre de défilement dans CSS
Nous pouvons utiliser la propriété scrollbar-width et la définir sur none pour masquer la barre de défilement en CSS. Cela masquera la barre de défilement de la page Web. L’autre option, auto, définit la barre de défilement par défaut, et l’option thin rendra la barre de défilement plus fine en fonction du navigateur. Cependant, la propriété ne fonctionne que pour le navigateur Firefox. Nous utiliserons la propriété overflow-y pour que la fonctionnalité de défilement coupe le contenu. Cela fonctionne lorsqu’un élément de niveau bloc déborde en haut et sur les bords du bouton. Nous pouvons utiliser le même script PHP que la première méthode pour démontrer la désactivation de la barre de défilement.
Par exemple, créez un div avec la classe container. A l’intérieur du div, bouclez le texte comme dans la première méthode. En CSS, donnez une couleur d’arrière-plan ainsi qu’une largeur et une hauteur au conteneur. Définissez la propriété scrollbar-width sur none et définissez la propriété overflow-y sur scroll.
Dans l’exemple ci-dessous, le réglage de scrollbar-width sur none masquera la barre de défilement, et le overflow-y défini sur scroll maintiendra la fonctionnalité de défilement en vie. De cette façon, nous pouvons faire défiler une longue page cachant la barre de défilement.
Exemple de code :
<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