Comment masquer les barres de défilement en utilisant HTML et CSS

Les barres de défilement sont un élément très courant dans la conception Web, mais nous souhaitons parfois masquer les barres de défilement et utiliser d'autres méthodes pour réaliser le défilement. Cet article explique comment masquer les barres de défilement à l'aide de HTML et CSS.

Tout d’abord, nous devons comprendre comment les barres de défilement sont générées. En HTML, lorsque le contenu dépasse la zone visible, le navigateur génère automatiquement des barres de défilement. L'apparence et le comportement des barres de défilement sont déterminés par le système d'exploitation et le navigateur, et différents navigateurs et systèmes d'exploitation peuvent avoir des styles de barre de défilement différents.

Pour masquer la barre de défilement, nous devons utiliser CSS pour contrôler le style de la zone de défilement. Nous pouvons utiliser la propriété overflow en CSS pour contrôler le débordement de contenu, et utiliser le pseudo-élément ::-webkit-scrollbar pour contrôler le style de la barre de défilement.

Tout d’abord, voyons comment utiliser la propriété overflow pour masquer la barre de défilement. Nous pouvons définir la propriété overflow du conteneur dans lequel la barre de défilement doit être masquée sur masquée. De cette façon, lorsque le contenu déborde, le navigateur ne générera pas de barres de défilement, mais le contenu pourra toujours défiler.

Par exemple, le code suivant peut être utilisé pour masquer la barre de défilement d'un élément div :

<div style="height: 200px; width: 200px; overflow: hidden;">
  ...
</div>

Nous pouvons définir l'attribut overflow sur auto au lieu de masqué, afin que la barre de défilement ne s'affiche que lorsque le contenu déborde. Ensuite, nous pouvons utiliser le pseudo-élément ::-webkit-scrollbar en CSS pour contrôler le style de la barre de défilement.

Voici un exemple de code :

<style>
  .scrollbar-container {
    height: 200px;
    width: 200px;
    overflow: auto;
  }
  
  .scrollbar-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  .scrollbar-container::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 3px;
  }
  
  .scrollbar-container::-webkit-scrollbar-track {
    background-color: #f5f5f5;
  }
</style>

<div class="scrollbar-container">
  ...
</div>

Dans le code ci-dessus, nous créons d'abord un élément div qui contient le contenu qui doit défiler. Nous définissons la hauteur et la largeur de cet élément div sur 200 px et définissons sa propriété de débordement sur auto, afin que la barre de défilement n'apparaisse que lorsque le contenu déborde.

Ensuite, nous utilisons le pseudo-élément ::-webkit-scrollbar en CSS pour contrôler le style de la barre de défilement. Nous avons d'abord défini la largeur et la hauteur de la barre de défilement, puis avons spécifié la couleur d'arrière-plan et le rayon de bordure du pouce de la barre de défilement. Enfin, nous définissons la couleur d'arrière-plan de la piste de la barre de défilement.

Dans cet exemple, nous utilisons le pseudo-élément ::-webkit-scrollbar du moteur de navigateur WebKit pour contrôler le style de la barre de défilement. Si votre site Web doit prendre en charge d'autres navigateurs, vous devrez peut-être utiliser différents pseudo-éléments pour contrôler le style de la barre de défilement.

Avant de terminer, nous devons noter que la plupart des navigateurs grand public prennent actuellement en charge cette méthode pour masquer la barre de défilement, mais elle n'inclut pas certains navigateurs plus anciens tels que IE et Edge. Si vous devez être compatible avec ces anciens navigateurs, vous. peut utiliser JavaScript pour contrôler la visibilité de la barre de défilement.

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!