Comment modifier le style de la barre de défilement avec CSS-Questions et réponses frontales-php.cn

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

PHPz

Libérer： 2023-04-24 09:31:39

original

9945 Les gens l'ont consulté

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;
}

Copier après la connexion

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;
}

Copier après la connexion

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;
}

Copier après la connexion

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;
}

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

Ensuite, dans js, initialisez le conteneur via l'instruction "new PerfectScrollbar('.ps')".

<script>
   new PerfectScrollbar('.ps');
</script>

Copier après la connexion

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;
}

Copier après la connexion

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!