Comment changer le style de la barre de défilement avec CSS

Dans le développement Web, les barres de défilement sont une fonctionnalité fréquemment utilisée. Cependant, les styles de barre de défilement par défaut du navigateur ne répondent pas toujours aux besoins des développeurs ou des utilisateurs. Par conséquent, nous pouvons modifier l’apparence de la barre de défilement grâce aux styles CSS.

CSS3 fournit un ensemble d'attributs de pseudo-éléments pour personnaliser les barres de défilement. Ces attributs peuvent être utilisés pour modifier le style de la barre de défilement. Voici plusieurs attributs couramment utilisés :

• ::-webkit-scrollbar : Agit sur les navigateurs principaux du webkit (Chrome et Safari)
• ::-moz-scrollbar : Agit sur le navigateur Firefox
• ::-o- scrollbar : Agit sur le navigateur Opera
• ::-ms-scrollbar : Agit sur le navigateur Internet Explorer

Nous prenons le navigateur Chrome comme exemple pour présenter comment utiliser CSS pour changer le style de la barre de défilement.

Tout d'abord, nous devons utiliser les pseudo-éléments ci-dessus pour sélectionner la barre de défilement :

/* 选中垂直滚动条 */
::-webkit-scrollbar {
  width: 10px; /* 设置滚动条宽度 */
}

/* 选中水平滚动条 */
::-webkit-scrollbar-horizontal {
  height: 10px; /* 设置滚动条高度 */
}

/* 选中滚动条轨道 */
::-webkit-scrollbar-track {
  background: #eee; /* 设置滚动条轨道颜色 */
}

/* 选中滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #aaa; /* 设置滚动条滑块颜色 */
}

Dans le code, nous utilisons 4 pseudo-éléments pour sélectionner différentes parties de la barre de défilement, à savoir ::-webkit-scrollbar, : :-webkit-scrollbar-horizontal, ::-webkit-scrollbar-track et ::-webkit-scrollbar-thumb.

Parmi eux, ::-webkit-scrollbar est utilisé pour sélectionner la barre de défilement entière et définir la largeur de la barre de défilement. ::-webkit-scrollbar-horizontal est utilisé pour sélectionner la barre de défilement horizontale et définir la hauteur de la barre de défilement. ::-webkit-scrollbar-track est utilisé pour sélectionner la partie piste de la barre de défilement et définir la couleur de la piste. ::-webkit-scrollbar-thumb est utilisé pour sélectionner la partie curseur de la barre de défilement et définir la couleur du curseur.

Si vous souhaitez obtenir l'effet de style en glissant sur le curseur, vous pouvez utiliser la pseudo-classe de survol pour sélectionner le curseur :

/* 选中滑过滚动条滑块部分 */
::-webkit-scrollbar-thumb:hover {
  background: #666;
}

En plus des attributs de style introduits ci-dessus, d'autres attributs peuvent être utilisés pour modifier l'apparence de la barre de défilement, par exemple, border-radius, box-shadow, etc. Il convient de noter que la plupart de ces propriétés ne sont valables que dans les navigateurs webkit et que l'implémentation des différents navigateurs peut être légèrement différente.

De plus, nous pouvons également utiliser des bibliothèques CSS tierces, telles que Perfect Scrollbar et JScrollPane, pour implémenter plus facilement des styles de barre de défilement personnalisés.

En bref, grâce aux styles CSS, nous pouvons modifier l'apparence de la barre de défilement de manière très flexible pour obtenir une meilleure expérience utilisateur et une meilleure conception Web.

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!