interface Web
Questions et réponses frontales
Comment modifier le style de la barre de défilement avec CSS
Comment modifier le style de la barre de défilement avec CSS
Ces dernières années, avec le développement d'Internet, de plus en plus de sites Web ont commencé à prêter attention à l'expérience utilisateur, et l'un des détails petits mais importants est le style de la barre de défilement. Les barres de défilement traditionnelles ne sont pas belles et n'ont généralement que le style par défaut fourni avec le navigateur et ne peuvent pas être personnalisées. Cependant, en modifiant CSS, nous pouvons facilement modifier le style des barres de défilement pour les rendre plus cohérentes avec le style global du site Web.
Tout d’abord, vous devez comprendre la nature des barres de défilement. La barre de défilement est en fait un élément composé de deux parties : le curseur et la piste de la barre de défilement. Le curseur est utilisé pour identifier la position actuelle, tandis que la piste de la barre de défilement fait référence à l'ensemble de l'élément de barre où il se trouve. Par conséquent, pour modifier le style de la barre de défilement, nous devons traiter ces deux parties séparément.
1. Modifier le style du slider
Pour modifier le style du slider, on peut utiliser le sélecteur de pseudo-classe "::-webkit-scrollbar-thumb". Ce sélecteur de pseudo-classe n'est valable que pour les navigateurs dotés du noyau Webkit, tels que Chrome, Safari, etc.
Le code est le suivant :
::-webkit-scrollbar-thumb {
background-color: #8B8B8B;
border-radius: 10px;
}Le code ci-dessus signifie définir la couleur d'arrière-plan du curseur sur gris et définir les coins du curseur sur des coins arrondis.
En même temps, nous pouvons également apporter d'autres modifications de style personnalisées au curseur, telles que le réglage de la largeur et de la hauteur :
::-webkit-scrollbar-thumb {
background-color: #8B8B8B;
border-radius: 10px;
width: 10px;
height: 50px;
}2. Modifier le style de la piste de la barre de défilement
Pour modifier le style de la barre de défilement track, on peut utiliser ":-webkit-scrollbar-track" ce sélecteur de pseudo-classe.
Le code est le suivant :
::-webkit-scrollbar-track {
background-color: #F0F0F0;
border-radius: 10px;
}Le code ci-dessus signifie définir la couleur d'arrière-plan de la piste de la barre de défilement sur gris clair et définir les coins de la piste de la barre de défilement sur des coins arrondis.
De même, nous pouvons également apporter d'autres modifications de style personnalisées à la piste de la barre de défilement, telles que le réglage de la hauteur et de la largeur :
::-webkit-scrollbar-track {
background-color: #F0F0F0;
border-radius: 10px;
width: 20px;
height: 200px;
}Remarque : si la page Web à modifier utilise un navigateur non-Webkit, tel que Firefox et IE Attendez , alors le code ci-dessus ne prendra pas effet. Par conséquent, pour modifier le style de la barre de défilement entre navigateurs, nous devons également utiliser d’autres techniques.
3. Implémenter la modification du style de la barre de défilement entre navigateurs
Afin d'implémenter la modification du style de la barre de défilement entre navigateurs, nous pouvons utiliser une bibliothèque js tierce - "perfect-scrollbar". Cette bibliothèque permet des modifications de barre de défilement entièrement personnalisables et prend en charge tous les navigateurs populaires, notamment Chrome, Firefox, Safari, etc.
Tout d'abord, nous devons introduire les deux fichiers "perfect-scrollbar.css" et "perfect-scrollbar.min.js" dans la balise
<head> <link rel="stylesheet" type="text/css" href="path/to/perfect-scrollbar.css"> <script src="path/to/perfect-scrollbar.min.js"></script> </head>
Ensuite, ajoutez un div conteneur à la zone où le style doit être modifié et ajoutez-y une classe avec le nom de classe de style "ps".
<div class="ps"> <p>这是需要滚动条的区域</p> </div>
Ensuite, dans js, initialisez le conteneur via l'instruction "new PerfectScrollbar('.ps')".
<script>
new PerfectScrollbar('.ps');
</script>Enfin, nous pouvons ajouter les styles correspondants en CSS pour personnaliser la barre de défilement.
.ps {
height: 200px;
overflow: auto;
}
.ps__rail-x {
background-color: #eee;
bottom: 3px;
height: 10px;
}
.ps__rail-y {
background-color: #eee;
width: 10px;
right: 3px
}
.ps__thumb-x {
background-color: #a1a1a1;
border-radius: 6px;
}
.ps__thumb-y {
background-color: #a1a1a1;
border-radius: 6px;
width: 6px;
}Dans le code ci-dessus, ".ps" est le nom de classe de style du div du conteneur, et nous pouvons définir sa hauteur, sa largeur et d'autres styles de taille. "__rail-x" et "__rail-y" correspondent respectivement aux directions x et y de la piste de la barre de défilement et sont utilisés pour définir le style de la piste de la barre de défilement. "__thumb-x" et "__thumb-y" correspondent respectivement aux directions x et y du curseur et sont utilisés pour définir le style du curseur.
Grâce au processus ci-dessus, nous pouvons déjà modifier le style de la barre de défilement dans divers navigateurs. Qu'il s'agisse de sélecteurs de pseudo-classes CSS ou de bibliothèques tierces, nous pouvons facilement modifier le style de la barre de défilement et améliorer l'expérience globale du site 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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Qu'est-ce que l'utilisation Effecte? Comment l'utilisez-vous pour effectuer des effets secondaires?
Mar 19, 2025 pm 03:58 PM
L'article traite de l'utilisation Effecte dans React, un crochet pour gérer les effets secondaires comme la récupération des données et la manipulation DOM dans les composants fonctionnels. Il explique l'utilisation, les effets secondaires courants et le nettoyage pour éviter des problèmes comme les fuites de mémoire.
Expliquez le concept de chargement paresseux.
Mar 13, 2025 pm 07:47 PM
Le chargement paresseux retarde le chargement du contenu jusqu'à ce qu'il soit nécessaire, améliorant les performances du Web et l'expérience utilisateur en réduisant les temps de chargement initiaux et la charge du serveur.
Quelles sont les fonctions d'ordre supérieur en JavaScript, et comment peuvent-ils être utilisés pour écrire du code plus concis et réutilisable?
Mar 18, 2025 pm 01:44 PM
Les fonctions d'ordre supérieur dans JavaScript améliorent la concision du code, la réutilisabilité, la modularité et les performances par abstraction, modèles communs et techniques d'optimisation.
Comment fonctionne le currying en JavaScript et quels sont ses avantages?
Mar 18, 2025 pm 01:45 PM
L'article traite du curry dans JavaScript, une technique transformant les fonctions mulguments en séquences de fonctions à argument unique. Il explore la mise en œuvre du currying, des avantages tels que des applications partielles et des utilisations pratiques, améliorant le code
Comment fonctionne l'algorithme de réconciliation React?
Mar 18, 2025 pm 01:58 PM
L'article explique l'algorithme de réconciliation de React, qui met à jour efficacement le DOM en comparant les arbres DOM virtuels. Il traite des avantages de la performance, des techniques d'optimisation et des impacts sur l'expérience utilisateur. Compte de charge: 159
Comment empêchez-vous le comportement par défaut dans les gestionnaires d'événements?
Mar 19, 2025 pm 04:10 PM
L'article discute de la prévention des comportements par défaut dans les gestionnaires d'événements à l'aide de la méthode empêchée dedEfault (), de ses avantages tels que une expérience utilisateur améliorée et des problèmes potentiels tels que les problèmes d'accessibilité.
Qu'est-ce que UseContext? Comment l'utilisez-vous pour partager l'état entre les composants?
Mar 19, 2025 pm 03:59 PM
L'article explique UseContext dans React, qui simplifie la gestion de l'État en évitant le forage des accessoires. Il traite des avantages tels que les améliorations centralisées de l'État et des performances grâce à des redevances réduites.
Quels sont les avantages et les inconvénients des composants contrôlés et incontrôlés?
Mar 19, 2025 pm 04:16 PM
L'article traite des avantages et des inconvénients des composants contrôlés et incontrôlés dans la réaction, en se concentrant sur des aspects tels que la prévisibilité, la performance et les cas d'utilisation. Il conseille les facteurs à considérer lors du choix entre eux.
