Comment annuler la barre de défilement en CSS

CSS (Cascading Style Sheets) est un langage utilisé pour exprimer les styles de documents. Il fournit de nombreux attributs et règles de style riches pour nous aider à réaliser la mise en page et la présentation des pages Web. Parmi eux, la barre de défilement est un élément courant de la page Web, mais nous pouvons parfois souhaiter annuler son affichage. Cet article explique comment utiliser CSS pour annuler la barre de défilement.

1. Annulez la barre de défilement verticale

1. Ajoutez l'attribut overflow:hidden à la balise body. Cette méthode est la plus simple et la plus directe et masquera la barre de défilement verticale pour toute la page.

body {
  overflow-y:hidden;
}

2. Utilisez le pseudo-élément ::-webkit-scrollbar. Cette méthode s'applique uniquement aux navigateurs basés sur des kits Web, tels que Chrome et Safari. Le pseudo-élément ::-webkit-scrollbar peut contrôler le style de la barre de défilement. Nous pouvons définir sa largeur à 0 pour masquer la barre de défilement verticale.

body::-webkit-scrollbar {
  width: 0px;
}

3. Utilisez le pseudo-élément ::-ms-scrollbar. Cette méthode s'applique uniquement aux navigateurs IE et utilise une méthode similaire au pseudo-élément de barre de défilement webkit. De même, définir sa largeur sur 0 masque la barre de défilement verticale.

body::-ms-scrollbar {
  width: 0px;
}

2. Annulez la barre de défilement horizontale

1. Ajoutez l'attribut overflow-x:hidden à la balise body. Cette méthode est similaire à l'annulation de la barre de défilement verticale, qui masquera la barre de défilement horizontale pour toute la page.

body {
  overflow-x:hidden;
}

2. Utilisez le pseudo-élément ::-webkit-scrollbar-horizontal. Ce pseudo-élément n'affectera que la barre de défilement horizontale. Vous pouvez également définir sa largeur sur 0 pour masquer la barre de défilement horizontale.

body::-webkit-scrollbar-horizontal {
  height: 0px;
}

3. Utilisez le pseudo-élément ::-ms-scrollbar-horizontal. Le navigateur IE prend également en charge le masquage de la barre de défilement horizontale, utilisez simplement une méthode similaire à celle ci-dessus pour contrôler sa largeur.

body::-ms-scrollbar-horizontal {
  height: 0px;
}

3. Annulez les flèches de la barre de défilement

En plus de masquer la barre de défilement elle-même, vous devez parfois également masquer les flèches de la barre de défilement (également appelées boutons de la barre de défilement). Voici quelques façons de procéder.

1. Utilisez le pseudo-élément ::-webkit-scrollbar-button. Ce pseudo-élément contrôle les boutons fléchés de la barre de défilement, qui peuvent être masqués en la rendant transparente.

body::-webkit-scrollbar-button {
  background-color: transparent;
}

2. Utilisez le pseudo-élément ::-ms-scrollbar-button. Internet Explorer prend également en charge les méthodes de pseudo-éléments pour masquer les flèches de la barre de défilement.

body::-ms-scrollbar-button {
  background-color: transparent;
}

4. Annuler la piste de la barre de défilement

La piste de la barre de défilement fait référence à une ligne à côté de la barre de défilement et constitue également la zone que l'utilisateur peut faire glisser. Voici quelques façons de désactiver les pistes de la barre de défilement.

1. Utilisez le pseudo-élément ::-webkit-scrollbar-track. Ce pseudo élément peut nous aider à contrôler l'affichage et le masquage de la piste de la barre de défilement.

body::-webkit-scrollbar-track {
  background-color: transparent;
}

2. Utilisez le pseudo-élément ::-ms-scrollbar-track. De même, le navigateur IE prend également en charge le masquage des pistes de la barre de défilement.

body::-ms-scrollbar-track {
  background-color: transparent;
}

Résumé

Ci-dessus, il existe plusieurs façons d'annuler les barres de défilement à l'aide de CSS. Bien entendu, la compatibilité de ces méthodes peut varier selon les navigateurs et nous devons effectuer des sélections et des ajustements en fonction de circonstances spécifiques. Dans les applications pratiques, nous devons également prendre en compte de manière globale des facteurs tels que la conception des pages, l'expérience utilisateur et la compatibilité des navigateurs pour décider d'utiliser ou non ces méthodes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!