Comment créer une barre de défilement personnalisée avec CSS

Oui, vous pouvez créer des barres de défilement personnalisées via des pseudo-éléments WebKit, qui prennent principalement en charge Chrome, Edge et Safari. Firefox nécessite des attributs de Collbar-Width et Scrollbar-Color, tandis que les anciens navigateurs tels que IE ne les soutiennent pas et doivent s'appuyer sur le style par défaut. Les développeurs peuvent définir la largeur de la barre de défilement, la piste d'arrière-plan et le style de curseur via des pseudo-éléments tels que :: - webkit-scrollbar, :: - webkit-scrollbar-track et :: - webkit-scrollbar-thumb-thumb, et définir l'ampleur de l'action avec des sélecteurs de classe. Dans le même temps, définissez la barre de défilement pour Firefox pour obtenir la compatibilité des navigateurs croisés et finalement obtenir des barres de défilement personnalisées finales et normales dans les navigateurs modernes.

La création d'une barre de défilement personnalisée avec CSS est simple en utilisant des pseudo-éléments pris en charge par des navigateurs basés sur webkit (comme Chrome, Edge et Safari). Alors que Firefox et Internet Explorer ont une prise en charge limitée ou non pour les barres de défilement avec CSS, la plupart des navigateurs modernes acceptent les propriétés de la barre de défilement WebKit.

Voici comment créer une barre de défilement personnalisée:

1. Cibler la barre de défilement avec des pseudo-éléments Webkit

Utilisez les pseudo-éléments spécifiques à WebKit suivants pour styliser différentes parties de la barre de défilement:

• ::-webkit-scrollbar - Toute la barre de défilement
• ::-webkit-scrollbar-track - La piste (arrière-plan) de la barre de défilement
• ::-webkit-scrollbar-thumb - la poignée de défilement dragable
• ::-webkit-scrollbar-corner - le coin où les barres de défilement horizontales et verticales se rencontrent
• ::-webkit-scrollbar-button - Boutons facultatifs aux extrémités de la barre de défilement (rarement utilisé)

Exemple: barre de défilement verticale personnalisée

 / * Largeur de toute la barre de défilement * /
:: - webkit-scrollbar {
  Largeur: 12px;
}

/ * Piste (arrière-plan) * /
:: - Webkit-Scrollbar-Track {
  Contexte: # f1f1f1;
  Border-Radius: 10px;
}

/ * Manche (pouce) * /
:: - webkit-scrollbar-thumb {
  Contexte: # 888;
  Border-Radius: 10px;
  Border: 2px solide # f1f1f1; / * Facultatif: ajoute l'espacement entre le pouce et la piste * /
}

/ * Manipuler sur le survol * /
:: - Webkit-Scrollbar-thumb: Hover {
  Contexte: # 555;
}

Remarque: width s'applique aux barres de défilement verticales. Pour les barres de défilement horizontales, utilisez height sur ::-webkit-scrollbar .

2. Appliquer uniquement à des conteneurs spécifiques

Par défaut, les styles ci-dessus s'appliquent à l'échelle mondiale. Pour personnaliser les barres de défilement uniquement dans un élément spécifique (par exemple, une div avec une classe), préfixez les pseudo-éléments:

 .Custom-Container :: - Webkit-Scrollbar {
  Largeur: 8px;
}

.Custom-Container :: - Webkit-Scrollbar-Track {
  Contexte: #eee;
}

.Custom-Container :: - Webkit-Scrollbar-thumb {
  Color en arrière-plan: # 007BFF;
  Border-Radius: 4px;
}

Puis utilisez-le dans HTML:

 <div class = "personnalisé-container" style = "hauteur: 200px; overflow-y: scroll;">
  <p> Contenu long ici ... </p>
</div>

3. Considérations de croisement

• Chrome, Edge, Safari, Opera : Prise en charge complète pour ::-webkit-scrollbar .
• Firefox : utilise les propriétés scrollbar-color scrollbar-width et de la barre de défilement (personnalisation limitée):

 / * Firefox * /
.Custom-container {
  Scrollbar-Width: mince; / * ou auto, aucun * /
  Scrollbar-Color: # 888 # f1f1f1; / * Couleur du pouce et de la piste * /
}

• IE et des navigateurs plus anciens : pas de support. Scrollbar apparaîtra par défaut.

4. meilleures pratiques

• Gardez le pouce assez grand pour traîner confortable.
• Assurez-vous un bon contraste entre le pouce et la piste.
• Évitez les barres de défilement trop minces qui sont difficiles à interagir.
• Tester sur différents appareils - Le comportement de défilement du pavé tactile peut être différent.

Fondamentalement, utilisez des pseudo-éléments WebKit pour Chrome / Safari / Edge, ajoutez scrollbar-color pour Firefox et laissez les autres navigateurs se retomber gracieusement. Ce n'est pas entièrement standardisé, mais largement pris en charge dans des environnements modernes.

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!