Sans aucun doute, le défilement joue un rôle vital dans les applications Web. Cependant, vous n'avez peut-être pas besoin de cette barre de défilement sur votre page à un moment donné. Par exemple, si le conteneur ne couvre que vingt-cinq pour cent d'une page Web et qu'il est aligné, la barre de défilement supplémentaire se fera sûrement au centre. Dans une telle situation, vous pouvez utiliser quelques propriétés CSS pour désactiver la barre de défilement.

Cet article couvrira la méthode pour désactiver la barre de défilement dans CSS.

Comment désactiver la barre de défilement dans CSS?

Pour désactiver la barre de défilement sur une page, utilisez les propriétés CSS suivantes:

• débordement (Désactiver la barre de défilement vertical)
• débordement-x (Désactiver la barre de défilement horizontale)
• débordement (Désactiver les barres de défilement verticales et horizontales)

Explorons chaque propriété CSS une par une.

Méthode 1: Utilisez une propriété débordeuse pour désactiver la barre de défilement verticale dans CSS

Le "débordement”La propriété spécifie ce qui se passera si le contenu ne correspond pas au conteneur de manière très à la hauteur. Il est également utilisé pour afficher le contenu de débordement d'un élément au niveau du bloc et pour ajouter ou désactiver une barre de défilement.

Alors, prenons un exemple pour vérifier la procédure de désactivation de la barre de défilement verticale à l'aide de la propriété CSS Overflow-y.

Exemple

Pour notre page HTML, nous désactiverons la barre de défilement verticale présente sur le côté droit:

Placer les éléments HTML souhaités, comme dans notre cas, nous ajouterons une rubrique dans le «”Tag du fichier html:

Désactiver la barre de défilement

Pour masquer la barre de défilement verticale, définissez le «débordement«Propriété à«caché". La hauteur et la largeur de "200%"Sera utilisé pour rendre la page plus longue et plus large. C'est ainsi que nous obtiendrons intentionnellement les barres de défilement sur notre page:

Enregistrez le code fourni et exécutez votre fichier HTML dans le navigateur:

Comme vous pouvez le voir, nous avons réussi à désactiver la barre de défilement verticale en utilisant la propriété CSS Overflow-y.

Méthode 2: Utilisez une propriété Overflow-X pour désactiver la barre de défilement horizontale dans CSS

Lorsque le contenu ne rentre pas dans le conteneur de manière largeur, le «débordement-x»La propriété est utilisée pour gérer de tels scénarios. Il définit ce qui montre lorsque le contenu ajouté déborde des bords droite et gauche d'un élément au niveau du bloc. Cette propriété CSS peut également être utilisée pour désactiver la barre de défilement horizontale.

Exemple

Nous allons désormais désactiver la barre de défilement horizontale en dessous de notre page HTML:

Pour cacher la barre de défilement horizontale, définissez le «débordement-x pour "caché»Et ajoutez la valeur des propriétés de hauteur et de largeur comme indiqué dans l'exemple précédent:

Sortir

Veulent désactiver les barres horizontales et verticales à la fois? Si oui, alors suivez la section suivante!

Méthode 3: Utilisez la propriété de débordement pour désactiver les barres de défilement verticales et horizontales dans CSS

Lorsque le contenu ne rentre pas dans le conteneur horizontalement aussi bien que verticalement, le «débordement”La propriété spécifie s'il faut ajouter des barres de défilement ou couper le contenu. Vous pouvez également utiliser cette propriété CSS pour désactiver simultanément les barres de défilement verticales et horizontales.

Exemple

Dans le même fichier HTML, nous ajouterons le "débordement«Propriété et attribuez-le un«caché" valeur. Cela désactivera la barre de défilement des deux endroits, horizontalement et verticalement:

Sortir

Nous avons proposé des instructions sur la désactivation des barres de défilement en utilisant différentes propriétés CSS.

Conclusion

Pour désactiver les barres de défilement dans CSS, vous pouvez utiliser "débordement-x","débordement", et le "débordement" propriétés. La propriété Overflow-X est spécifiquement utilisée pour désactiver la barre de défilement verticale et la propriété de débordement pour désactiver les barres de défilement horizontal. De plus, la propriété trop-plein aide à désactiver les barres verticales et horizontales à la fois. Cet article a discuté des méthodes pour désactiver les barres de défilement dans CSS.