Comment utiliser CSS pour créer des styles de barre de défilement personnalisés

Comment utiliser CSS pour créer des effets personnalisés de style de barre de défilement

Ces dernières années, la personnalisation des styles de barre de défilement est devenue l'une des exigences courantes dans la conception Web. En personnalisant le style de la barre de défilement, vous pouvez améliorer l'esthétique et l'expérience utilisateur de la page Web. Cet article présentera en détail comment utiliser CSS pour créer des effets personnalisés de style de barre de défilement et fournira des exemples de code spécifiques.

1. Personnaliser le style de la barre de défilement

Pour créer un effet personnalisé du style de la barre de défilement, nous devons d'abord comprendre les composants de la barre de défilement, y compris l'arrière-plan de la barre de défilement, le curseur (également appelé pouce), et la barre de défilement Orbites (également appelées pistes), etc.

1. Style d'arrière-plan de la barre de défilement

Le style d'arrière-plan de la barre de défilement définit le style général de la barre de défilement, tel que la couleur d'arrière-plan, le style de bordure, etc. Voici un exemple de code :

::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
}

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

2. Style du curseur

Le style du curseur définit la partie de la barre de défilement utilisée pour faire glisser le contenu. Vous pouvez personnaliser la couleur, la forme, etc. du curseur. Voici un exemple de code :

::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
}

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

3. Style de piste de la barre de défilement

Le style de piste de la barre de défilement définit la piste d'arrière-plan de la barre de défilement. Vous pouvez personnaliser le style de la piste, y compris la couleur d'arrière-plan, le style de bordure, etc. Voici un exemple de code :

::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
}

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

2. Compatibilité des styles de barre de défilement

Les exemples de code ci-dessus sont écrits pour les navigateurs dotés du noyau WebKit, tels que Chrome, Safari, etc. Différents navigateurs prennent en charge différemment les styles de barre de défilement, nous devons donc ajouter une adaptation de style aux différents navigateurs dans le code.

Ce qui suit est le code d'adaptation du style de la barre de défilement pour différents navigateurs :

/* Firefox */
 scrollbar-width: thin;
 scrollbar-color: #888 #f5f5f5;

/* Edge */
  scrollbar-width: thin;

/* Internet Explorer 10+ */
-ms-overflow-style: none;

/* Opera */
scrollbar-color: #888 #f5f5f5;

3. Personnalisation avancée du style de la barre de défilement

En plus des styles de base d'arrière-plan, de piste et de curseur, nous pouvons également personnaliser davantage le style de la barre de défilement, comme l'ajout d'effets de survol, d'effets de clic, etc.

Ce qui suit est un exemple de code pour obtenir l'effet de changement de couleur de la barre de défilement lorsque la souris survole :

::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
  transition: background-color 0.3s;
}

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

IV Résumé

En utilisant CSS, nous pouvons facilement personnaliser le style de la barre de défilement pour améliorer la beauté et. beauté de la page Web. Cet article présente les méthodes de personnalisation de base du style des barres de défilement, notamment les styles d’arrière-plan, de curseur et de piste, et fournit des exemples de code pratiques. Parallèlement, nous avons également discuté de la compatibilité et de la personnalisation avancée des styles de barre de défilement.

J'espère que cet article pourra vous aider à comprendre et à utiliser CSS pour créer une personnalisation du style de 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!