Comment modifier la barre de défilement en CSS

Dans la conception et le développement Web, les barres de défilement sont un élément largement utilisé. Il permet aux utilisateurs de faire défiler la page et d'afficher plus de contenu. Cependant, le style de barre de défilement par défaut du navigateur peut ne pas correspondre à la conception Web, ce qui entraîne une incongruité visuelle. Pour ce faire, nous pouvons utiliser CSS pour modifier le style de la barre de défilement afin de mieux l'intégrer dans la conception Web. Cet article explique comment modifier les barres de défilement via CSS.

1. Comprendre les différentes parties de la barre de défilement

Avant de modifier la barre de défilement, nous devons comprendre les différentes parties de la barre de défilement. Dans la plupart des navigateurs, une barre de défilement se compose de quatre parties : le curseur, la piste, la flèche vers le bas et la flèche vers le haut. Parmi eux, le curseur fait référence à la partie qui peut être déplacée, la piste est la zone dans laquelle le curseur se déplace, et la flèche vers le bas et la flèche vers le haut sont respectivement les boutons permettant de faire défiler vers le bas et vers le haut.

2. Modifier la couleur du curseur

Tout d'abord, modifions la couleur du curseur. Grâce au sélecteur de pseudo-éléments CSS, nous pouvons sélectionner la partie slider et modifier sa couleur. Le code spécifique est le suivant :

/* 选中滑块部分 */
::-webkit-scrollbar-thumb {
  background-color: #666;
}

Le code ci-dessus change la couleur d'arrière-plan du curseur en gris foncé (#666) et peut également être modifié en d'autres couleurs si nécessaire.

Notez que les noms de style CSS des barres de défilement sont légèrement différents selon les navigateurs. Dans les navigateurs basés sur Webkit, tels que Chrome, Safari, etc., le sélecteur est « ::-webkit-scrollbar-thumb » ; dans Firefox, le sélecteur est « ::-moz-scrollbar-thumb » ; Dans le navigateur, le sélecteur est "::-ms-scrollbar-thumb".

3. Modifiez la couleur et l'arrière-plan de la piste

Ensuite, modifions la couleur et l'arrière-plan de la piste. Utilisez le sélecteur de pseudo-éléments pour sélectionner la section de piste et modifier son style à la manière d'un curseur. Le code spécifique est le suivant :

/* 选中轨道部分 */
::-webkit-scrollbar-track {
  background-color: #eee;
  border-radius: 10px;
}

Le code ci-dessus change la couleur d'arrière-plan de la piste en blanc cassé (#eee) et définit le rayon du coin de la bordure sur 10 pixels. Encore une fois, cela peut être modifié avec d'autres couleurs et rayons de coin selon les besoins.

4. Modifiez le style de la flèche

Enfin, modifions le style de la flèche. Contrairement aux curseurs et aux pistes, les flèches n'ont pas de sélecteurs indépendants. Nous devons utiliser un sélecteur combiné pour modifier le style des flèches. Le code spécifique est le suivant :

/* 选中滚动条按钮 */
::-webkit-scrollbar-button {
  background-color: #666;
  display: block;
}

/* 选中向上箭头 */
::-webkit-scrollbar-button:start {
  height: 20px;
  background-image: url('up-arrow.svg');
  background-size: contain;
}

/* 选中向下箭头 */
::-webkit-scrollbar-button:end {
  height: 20px;
  background-image: url('down-arrow.svg');
  background-size: contain;
}

Dans le code ci-dessus, nous avons d'abord sélectionné l'intégralité du bouton de la barre de défilement via le sélecteur "::-webkit-scrollbar-button", et défini sa couleur d'arrière-plan sur gris foncé (#666), et définissez-le Affiché en tant qu'élément de niveau bloc (display:block;). Ensuite, nous utilisons les sélecteurs combo "::-webkit-scrollbar-button:start" et "::-webkit-scrollbar-button:end" pour sélectionner respectivement la flèche vers le haut et la flèche vers le bas, en définissant leur hauteur sur 20 pixels ( hauteur :20px;) et ajoutez un style personnalisé à la flèche en utilisant les propriétés background-image et background-size. Il convient de noter que l'image de la flèche doit être préparée à l'avance et liée au fichier CSS en utilisant le chemin relatif correct.

5. Résumé

Jusqu'à présent, nous avons appris à modifier le style de la barre de défilement en utilisant CSS. En modifiant les attributs de style tels que la couleur, l'arrière-plan et la taille des curseurs, des pistes et des flèches, vous pouvez mieux intégrer les barres de défilement dans la conception Web, améliorant ainsi l'expérience utilisateur. Il convient de noter que le nom du style CSS de la barre de défilement peut être différent selon les navigateurs et doit être ajusté en fonction de la situation réelle.

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!