Comment définir le style de la barre de défilement en CSS

Dans les pages Web, les barres de défilement sont un élément important, qui permettent aux utilisateurs de faire glisser facilement le contenu sur de longues pages. Cependant, les barres de défilement fournies avec les navigateurs ne sont pas toujours belles et peuvent affecter l'esthétique globale de la page Web. À l’heure actuelle, nous pouvons utiliser CSS pour personnaliser le style de la barre de défilement afin de rendre l’ensemble de la page Web plus belle et plus professionnelle.

La première chose que vous devez comprendre est que la barre de défilement est également un élément DOM, qui peut être modifié via les styles CSS. En termes simples, nous pouvons modifier la couleur, la largeur, la hauteur, la bordure, la taille du curseur, la position du curseur et d'autres propriétés de la barre de défilement via les styles CSS. Le style de la barre de défilement n'est pas nécessairement le même dans les différents navigateurs, mais la plupart des navigateurs prennent en charge CSS pour modifier le style de la barre de défilement. Ensuite, nous présenterons certaines propriétés CSS couramment utilisées pour styliser les barres de défilement.

1. scrollbar-width

En définissant la propriété scrollbar-width, vous pouvez modifier la largeur de la barre de défilement du navigateur. Cette méthode est très efficace pour certains styles de barres de défilement simples, mais elle peut ne pas être très pratique pour les styles de barres de défilement personnalisés complexes. La méthode d'implémentation est la suivante :

body {
   scrollbar-width: thin; /* 设置滚动条宽度 */
}

Notez que cette méthode est applicable dans le navigateur WebKit et le navigateur Firefox les plus récents actuels.

2. scrollbar-color

En définissant la propriété scrollbar-color, vous pouvez changer la couleur de la barre de défilement. La méthode d'implémentation spécifique est la suivante :

body {
   scrollbar-color: #999; /* 设置滚动条颜色 */
}

Vous pouvez également définir la couleur du bloc de défilement :

body {
   scrollbar-color: #999 #666; /* 设置滚动条和滚动块颜色 */
}

Cette méthode est également applicable dans le navigateur WebKit et le navigateur Firefox les plus récents actuels.

3. ::-webkit-scrollbar

Pour les navigateurs dotés du noyau WebKit, nous pouvons utiliser le pseudo-élément ::-webkit-scrollbar pour définir les propriétés liées à la barre de défilement. Les attributs couramment utilisés sont les suivants :

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

::-webkit-scrollbar-track {
   background: #eee; /* 设置滚动条背景颜色 */
}

::-webkit-scrollbar-thumb {
   background: #ccc; /* 设置滚动条滑块颜色 */
   border-radius: 5px; /* 设置滚动条滑块圆角 */
}

Dans ce code, nous utilisons le pseudo-élément ::-webkit-scrollbar pour modifier les attributs pertinents de la barre de défilement. Parmi eux, l'attribut width peut modifier la largeur de la barre de défilement ; l'attribut track peut définir la couleur d'arrière-plan de la barre de défilement ; l'attribut thumb peut définir la couleur du bloc de défilement et les coins arrondis du curseur.

Nous pouvons également ajouter des effets spéciaux au curseur, tels que des effets de streamer, des dégradés, des images, etc. Par exemple :

::-webkit-scrollbar-thumb {
   background: linear-gradient(45deg, #f5f5f5, #dbdbdb); /* 渐变 */
   box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.2), 1px 1px 5px rgba(0, 0, 0, 0.2); /* 阴影 */
   border-radius: 5px; /* 圆角 */
}

Dans ce code, nous ajoutons un dégradé de couleur et un effet d'ombre au curseur.

En plus du pseudo-élément ::-webkit-scrollbar, le navigateur FireFox prend également en charge le pseudo-élément scrollbar, et son utilisation est similaire au pseudo-élément ::-webkit-scrollbar.

En général, il existe de nombreuses façons de personnaliser les styles de barre de défilement. Nous pouvons combiner plusieurs propriétés CSS pour obtenir divers effets sympas. Cependant, il convient de noter que le style de la barre de défilement doit prendre en compte la compatibilité entre navigateurs. Tous les navigateurs ne prennent pas en charge tous les styles. Par conséquent, le choix des propriétés et techniques CSS appropriées est la clé pour implémenter des styles de barre de défilement personnalisés.

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!