Maison > interface Web > Questions et réponses frontales > Comment définir le style de la barre de défilement en CSS

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

PHPz
Libérer: 2023-04-24 10:09:16
original
5276 Les gens l'ont consulté

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; /* 设置滚动条宽度 */
}
Copier après la connexion

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

  1. 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; /* 设置滚动条颜色 */
}
Copier après la connexion

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

body {
   scrollbar-color: #999 #666; /* 设置滚动条和滚动块颜色 */
}
Copier après la connexion

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

  1. ::-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; /* 设置滚动条滑块圆角 */
}
Copier après la connexion

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; /* 圆角 */
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal