L'éditeur de Downcodes vous montrera comment utiliser CSS pour personnaliser le style de la barre de défilement ! Le style par défaut des barres de défilement des pages Web est parfois difficile à répondre aux besoins personnalisés. Cet article présentera en détail comment utiliser le pseudo-élément ::-webkit-scrollbar de CSS et ses sous-ensembles (::-webkit-scrollbar-thumb, :: -webkit-scrollbar-track, ::-webkit-scrollbar-button, etc.) pour personnaliser la taille, la couleur, la bordure, l'ombre et d'autres attributs de la barre de défilement afin de créer une expérience utilisateur plus belle. Nous expliquerons comment personnaliser les styles de base de la barre de défilement, les styles de curseur et de piste, les styles de boutons, et gérer des conceptions plus complexes et différents problèmes de compatibilité de navigateur. L'article comprend également des réponses aux questions fréquemment posées pour vous aider à mieux comprendre et appliquer les techniques de personnalisation des barres de défilement CSS.
La clé pour personnaliser les styles de barre de défilement CSS consiste à utiliser le pseudo-élément ::-webkit-scrollbar et ses sous-ensembles de pseudo-éléments associés, tels que :::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track, ::-webkit -scrollbar-bouton etc. Grâce à ces pseudo-éléments, vous pouvez contrôler la taille, la couleur, la bordure, l'ombre et d'autres propriétés de la barre de défilement. Parmi eux, ::-webkit-scrollbar-thumb contrôle le style du curseur et constitue le point de personnalisation le plus courant. Vous pouvez définir la couleur, la bordure, les coins arrondis ou l'ombre du curseur pour modifier l'apparence du curseur de la barre de défilement.
Le style de barre de défilement personnalisé en CSS utilise principalement la série de pseudo-éléments ::-webkit prise en charge par le navigateur principal Webkit. La largeur et la couleur de la barre de défilement peuvent être modifiées en définissant ::-webkit-scrollbar.
Par exemple, personnalisez la largeur de la barre de défilement à 5 px et définissez la couleur d'arrière-plan sur gris :
::-webkit-scrollbar {
largeur : 5px ;
couleur d'arrière-plan : #f9f9f9 ;
}
Ajoutez une ombre et des coins arrondis à la barre de défilement :
::-webkit-scrollbar-thumb {
couleur d'arrière-plan : #c1c1c1 ;
rayon de bordure : 10 px ;
box-shadow : encart 0 0 6px rgba(0,0,0,0.5);
}
Pour contrôler finement les styles du pouce et de la piste dans la barre de défilement, vous pouvez définir respectivement les styles de ::-webkit-scrollbar-thumb et ::-webkit-scrollbar-track.
Personnalisez le style du curseur de la barre de défilement pour augmenter l'effet interactif :
::-webkit-scrollbar-thumb {
couleur d'arrière-plan : #b6b6b6 ;
rayon de bordure : 10 px ;
transition : facilité de couleur d'arrière-plan de 0,2 s ;
}
::-webkit-scrollbar-thumb:hover {
couleur d'arrière-plan : #a8a8a8 ;
}
Personnalisez le style de la piste pour rendre la barre de défilement plus cohérente avec la conception globale :
::-webkit-scrollbar-track {
couleur d'arrière-plan : #e1e1e1 ;
rayon de bordure : 10 px ;
}
Les boutons de la barre de défilement peuvent être importants pour les longues pages. Ils sont situés aux deux extrémités de la barre de défilement, et leurs styles peuvent être définis à l'aide du pseudo-élément ::-webkit-scrollbar-button.
Embellissez le bouton de la barre de défilement et rendez la barre de défilement globale plus harmonieuse :
::-webkit-scrollbar-button:start:décrémentation,
::-webkit-scrollbar-button:end:increment {
affichage : bloc ;
hauteur : 5px ;
couleur d'arrière-plan : #ddd ;
}
Dans les conceptions plus complexes, vous devrez peut-être également concevoir l’état de la barre de défilement. Par exemple, gérer les différents états du curseur (par défaut, survol, actif) et du coin de défilement dans la vue de défilement.
Définissez les styles de curseur pour différents états afin d'améliorer l'expérience utilisateur :
::-webkit-scrollbar-thumb:window-inactive {
couleur d'arrière-plan : #b6b6b6 ;
}
::-webkit-scrollbar-corner {
couleur d'arrière-plan : #f9f9f9 ;
}
Améliorez l'expérience interactive des barres de défilement :
::-webkit-scrollbar-thumb:actif {
couleur d'arrière-plan : #999999 ;
}
Il convient de noter que le pseudo-élément ::-webkit-scrollbar et les styles de barre de défilement associés sont des fonctionnalités non standard. Ils ne sont valables que dans les navigateurs basés sur le noyau Webkit comme Chrome, Safari, etc. Par conséquent, ces styles personnalisés ne prendront pas effet dans d’autres navigateurs tels que Firefox ou IE.
Pour la personnalisation du style de la barre de défilement dans les navigateurs non Webkit, vous pouvez utiliser des bibliothèques JavaScript telles que perfect-scrollbar, ou disposer d'un contrôle de style limité en définissant l'attribut de débordement et le comportement de défilement de l'élément.
Pour garantir une bonne expérience sur les navigateurs non pris en charge :
Si vous devez prendre en compte la compatibilité entre navigateurs, concevez la barre de défilement pour garantir que les fonctionnalités de base ne sont pas affectées, même si le style n'est pas complètement cohérent. Vous pouvez également explorer l'utilisation des bibliothèques CSS-in-JS ou d'autres outils JavaScript pour implémenter des styles de barre de défilement personnalisés complexes.
En bref, la personnalisation des barres de défilement via CSS peut grandement améliorer l'esthétique et l'expérience utilisateur du site Web. Cependant, compte tenu des problèmes de compatibilité entre navigateurs, il existe parfois un compromis entre une personnalisation complexe de la barre de défilement ou le recours à des solutions de style de barre de défilement prêtes à l'emploi fournies par les frameworks frontaux.
1. Comment personnaliser le style de la barre de défilement en utilisant CSS ?
Les barres de défilement sont l'un des éléments courants des pages Web, mais le style de barre de défilement par défaut ne répond pas nécessairement à vos besoins de conception. Vous pouvez utiliser CSS pour personnaliser les styles des barres de défilement afin qu'ils correspondent au style et à l'image de marque de votre page Web.
Tout d'abord, vous devez sélectionner la barre de défilement à l'aide du sélecteur de pseudo-éléments ::-webkit-scrollbar. Ensuite, vous pouvez utiliser diverses propriétés CSS pour ajuster l'apparence de la barre de défilement, telles que la largeur et la hauteur pour définir la taille de la barre de défilement, background-color pour définir la couleur d'arrière-plan, border-radius pour définir les coins arrondis, etc. sur.
En plus du style de la barre de défilement elle-même, vous pouvez également utiliser ::-webkit-scrollbar-thumb et ::-webkit-scrollbar-track pour définir respectivement le style du curseur et de la piste de la barre de défilement. Par exemple, vous pouvez modifier la couleur du curseur, la couleur d'arrière-plan de la piste, etc.
Après avoir terminé vos styles personnalisés, vous pouvez les appliquer dans une feuille de style CSS pour les rendre efficaces. N'oubliez pas que le style des barres de défilement pouvant varier selon les navigateurs, il est préférable de tester et d'ajuster dans différents navigateurs.
2. Y a-t-il des précautions à respecter lors de la personnalisation du style de la barre de défilement ?
Plusieurs considérations doivent être prises en compte lors de la personnalisation des styles de barre de défilement.
Tout d’abord, vous devez savoir que les styles des barres de défilement peuvent varier selon les navigateurs. Par conséquent, vous devez tester et ajuster dans différents navigateurs pour vous assurer que vos styles s'affichent correctement dans chaque navigateur.
Deuxièmement, faites attention à l'accessibilité des styles de barre de défilement. Certains utilisateurs peuvent s'appuyer sur des barres de défilement pour naviguer dans le contenu Web. Vous devez donc vous assurer que vos styles personnalisés n'interfèrent pas avec leur expérience. Assurez-vous que vos barres de défilement sont toujours faciles à identifier et à utiliser.
Enfin, évitez de trop concevoir. Bien que les styles de barres de défilement personnalisés puissent ajouter une certaine personnalisation à vos pages Web, leur conception excessive peut distraire les utilisateurs du contenu. Alors gardez-le avec modération et assurez-vous que le style de votre barre de défilement est cohérent avec le style de conception global.
3. Existe-t-il un autre moyen de personnaliser le style de la barre de défilement en plus d'utiliser CSS ?
En plus d'utiliser CSS pour personnaliser les styles de barre de défilement, vous pouvez également envisager d'utiliser des bibliothèques ou des plug-ins tiers pour obtenir des effets de barre de défilement plus complexes.
Par exemple, vous pouvez utiliser certaines bibliothèques JavaScript populaires, telles que PerfectScrollbar ou SimpleBar, qui fournissent des fonctions de personnalisation de barre de défilement plus avancées, notamment des effets d'animation de barre de défilement, des événements personnalisés, le déplacement de curseur, etc.
Ces bibliothèques tierces offrent généralement plus d'options et de flexibilité pour répondre aux besoins de styles de barre de défilement plus personnalisés. Bien entendu, l’utilisation de ces bibliothèques peut également augmenter certains coûts d’apprentissage et d’intégration. Par conséquent, lors du choix, vous devez décider si vous souhaitez les utiliser en fonction de vos besoins spécifiques.
J'espère que ce tutoriel de l'éditeur de Downcodes pourra vous aider à maîtriser facilement la méthode de personnalisation des styles de barre de défilement avec CSS et à améliorer votre niveau de conception Web ! N'oubliez pas que dans les applications réelles, vous devez choisir une solution appropriée en fonction de besoins spécifiques et effectuer suffisamment de tests pour garantir la compatibilité et la convivialité sous différents navigateurs.