Comment masquer la barre de défilement dans CSS

Dans la navigation sur le Web, la barre de défilement apparaît verticalement et horizontalement, permettant aux utilisateurs de faire défiler le haut et la gauche à droite. En utilisant CSS, nous pouvons définir les attributs de la barre de défilement selon notre choix. Par exemple, cacher et modifier sa couleur et sa largeur. Dans cet article, nous apprendrons à masquer la barre de défilement à l'aide de propriétés CSS.

Parmi les nombreuses façons de le cacher, la plus courante est les propriétés de débordement et de banc de webkit.

Voici quelques exemples pratiques dans lesquels nous masquerons la barre de défilement en utilisant ces propriétés.

Très bien, commençons!

Masquer la barre de défilement en utilisant la propriété Overflow dans CSS

Le "débordement”La propriété détermine à quoi ressemblera le contenu lorsqu'il déborde de la zone de contenu, par exemple, en écourtant, en affichant des barres de défilement ou en affichant à l'extérieur de la boîte.

Syntaxe

Dans CSS, la propriété Overflow a la syntaxe suivante:

débordement: valeur

À la place de la valeur, nous pouvons définir différentes valeurs / paramètres des propriétés de débordement telles que Visible, Hidden, défilement, auto et héritage. Attribuez le «caché”Valeur à la propriété Overflow pour masquer la barre de défilement.

Voici un exemple pratique qui illustre ce concept d'une meilleure manière.

Exemple: comment masquer la barre de défilement dans CSS à l'aide de la propriété Overflow?

Créons un paragraphe à l'intérieur de l'utilisation du

Tag comme suit:

Nous faisons défiler haut et gauche à droite de la page Web tout en parcourant le Web en utilisant la barre de défilement qui apparaît verticalement et horizontalement. Dans HTML, il apparaît par défaut. En utilisant CSS, nous pouvons définir des attributs de la barre de défilement selon notre choix I.E largeur de la barre de défilement et de la couleur également. Nous masquons également la barre de défilement, en utilisant CSS.
Parmi les nombreuses façons de le cacher, les plus courants sont le débordement, la largeur de défilement et les propriétés de la barre de craquette Webkit.

Le résultat du code donné sera:

Ici, nous pouvons voir que la barre de défilement apparaît verticalement. Utilisons la propriété CSS Overflow pour le cacher.

Dans CSS, écrivez le code suivant et définissez la propriété Overflow sur «caché»:

corps
débordement caché;

En conséquence, la barre de défilement disparaîtra de la page:

Nous pouvons voir que la barre de défilement a été supprimée, mais la fonctionnalité de la barre de défilement est également désactivée. Cependant, en utilisant CSS, nous pouvons masquer la barre de défilement sans désactiver sa fonctionnalité.

Masquer la barre de défilement dans CSS à l'aide de la propriété «Webkit-Scrollbar»

Le "webkit-scrollbar»Pseudo-Element peut être utilisé pour styliser la barre de défilement d'un élément dans CSS. Cela nous aide également à cacher la barre de défilement. Cette propriété ne fonctionne que sur des navigateurs basés sur webkit, tels que Chrome, Opera, Safari, Edge, etc.

Syntaxe

Pour comprendre la propriété WebKit, nous devons d'abord comprendre sa syntaxe:

corps :: - webkit
/ * Affichage, largeur, style * /

WebKit a les éléments suivants qui servent différentes fonctionnalités. Certains sont:

• WebKit-Scrollbar: Il est utilisé pour modifier la barre de défilement entière.
• Webkit-Scrollbar-Button: Il est utilisé pour modifier les boutons vers droite à gauche de la barre de défilement.
• Webkit-Scrollbar-Track: Il est utilisé pour modifier la piste du défilement.
• webkit-scrollbar-thumb: Il est utilisé pour modifier la poignée de défilement glisser.
• Webkit-résiseur: Il est utilisé pour redimensionner ou modifier une poignée draggable.

Pour cacher la barre de défilement, le «webkit-scrollbar”Un pseudo-élément est utilisé.

Exemple: comment masquer la barre de défilement dans CSS à l'aide de la propriété WebKit?

Pour masquer la barre de défilement en utilisant le «webkit-scrollbar»Propriété, définissez la valeur de l'écran sur«aucun«Comme ci-dessous:

Body :: - Webkit-Scrollbar
Affichage: aucun;

Maintenant, dans la page Web, nous pouvons faire défiler la longue page Web sans voir la barre de défilement:

La barre de défilement a été cachée, et vous pouvez faire défiler le contenu du navigateur à l'aide des touches supérieures.

Conclusion

Le CSS "débordement" et "webkit»Les propriétés nous permettent de masquer la barre de défilement à la page Web. La propriété Overflow désactive également la fonctionnalité du défilement; Cependant, la propriété WebKit permet de faire défiler à l'aide de touches Arrow. Cet article a expliqué comment déborder la propriété et le travail de propriété WebKit dans CSS.