Comment embellir et personnaliser les barres de défilement avec CSS

Dans le développement Web, les barres de défilement sont un contrôle couramment utilisé qui peut aider le contenu de la page à mieux s'afficher dans un espace limité. Étant donné que les navigateurs et les systèmes d'exploitation ont certains styles par défaut pour les barres de défilement, il est souvent nécessaire d'embellir et de personnaliser les barres de défilement en CSS.

En CSS, vous pouvez utiliser certains pseudo-éléments pour personnaliser le style de la barre de défilement. Ces pseudo-éléments incluent :

1. ::-webkit-scrollbar : utilisé dans les navigateurs Chrome et Safari pour contrôler la taille, la forme et le style de la barre de défilement.

Exemple de code :

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: #dcdcdc;
  border-radius: 8px;
  border: 2px solid #f5f5f5;
}

2. ::-webkit-scrollbar-thumb : Un curseur utilisé pour contrôler la barre de défilement, vous pouvez modifier sa taille, sa transparence, sa couleur de bordure et d'arrière-plan et d'autres propriétés. Si le style du pseudo-élément n'est pas modifié, le style par défaut du navigateur sera utilisé.

Exemple de code :

::-webkit-scrollbar-thumb:hover {
  background-color: #a3a3a3;
}

::-webkit-scrollbar-thumb:active {
  background-color: #6d6d6d;
}

::-webkit-scrollbar-thumb {
  background-color: #dcdcdc;
  border-radius: 8px;
  border: 2px solid #f5f5f5;
  opacity: 0.7;
}

3. ::-webkit-scrollbar-track : utilisé pour contrôler le curseur de la barre de défilement et peut modifier sa taille, sa couleur d'arrière-plan, ses coins arrondis et d'autres attributs.

Exemple de code :

::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  border-radius: 8px;
}

4. ::-webkit-scrollbar-corner : Utilisé pour contrôler le coin de la barre de défilement, vous pouvez modifier sa couleur d'arrière-plan, ses coins arrondis et d'autres propriétés. Ce pseudo-élément peut fonctionner différemment selon les navigateurs.

Exemple de code :

::-webkit-scrollbar-corner {
  background-color: #f5f5f5;
  border-radius: 8px;
}

De plus, vous pouvez également utiliser d'autres propriétés CSS pour contrôler le style de la barre de défilement, telles que la couleur de la barre de défilement, la largeur de la barre de défilement, etc. A noter que ces attributs ne sont pas encore compatibles avec tous les navigateurs. Si vous devez assurer la compatibilité, il est recommandé d'utiliser le pseudo-élément ::-webkit-scrollbar pour embellir la barre de défilement.

En bref, l'embellissement et la mise en œuvre de styles de barres de défilement personnalisés jouent un rôle clé dans l'importance de la page. Grâce à l'utilisation de pseudo-éléments et au contrôle des styles, nous pouvons embellir la barre de défilement de notre site Web et ajouter une expérience comportementale plus personnalisée, ce qui peut réduire considérablement la résistance à l'expérience du site Web concerné.

Enfin, peu importe le niveau ou le niveau auquel vous vous trouvez, il est préférable d'avoir des besoins en production avant de faire ces choses compliquées !

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!