Création de barres de défilement personnalisées avec CSS : un guide complet

Les navigateurs Web modernes permettent aux développeurs de personnaliser l'apparence des barres de défilement à l'aide de CSS, améliorant ainsi l'attrait visuel des applications Web tout en conservant leurs fonctionnalités. Ce guide explique comment implémenter des barres de défilement personnalisées avec une compatibilité entre navigateurs.

Configuration de base

Tout d'abord, établissons le conteneur qui comportera notre barre de défilement personnalisée :

<div class="scrollbar-container">
  <h3 id="Visible-custom-scrollbar">Visible custom scrollbar</h3>
  <p>
    <!-- Content that creates scrollable overflow -->
  </p>
</div>

Style de conteneur

Le conteneur déroulant nécessite des dimensions et des propriétés de débordement spécifiques :

.scrollbar-container {
  height: 50%;           /* Fixed height to enable scrolling */
  width: 50%;           /* Container width */
  margin: 0 auto;       /* Center the container */
  overflow: auto;       /* Enable scrolling */
  padding: 1rem;        /* Internal spacing */
}

Implémentation multi-navigateurs

Navigateurs WebKit (Chrome, Safari, Edge)

Pour les navigateurs basés sur WebKit, nous utilisons les pseudo-éléments ::-webkit-scrollbar :

.scrollbar-container::-webkit-scrollbar {
  width: 4px;                    /* Width of the scrollbar */
  background-color: white;       /* Background color */
  border-radius: 100vw;         /* Rounded corners */
}

.scrollbar-container::-webkit-scrollbar-track {
  background: white;            /* Track color */
  border-radius: 100vw;        /* Rounded corners for track */
}

.scrollbar-container::-webkit-scrollbar-thumb {
  background: plum;            /* Scrollbar thumb color */
  border-radius: 100vw;       /* Rounded corners for thumb */
}

Firefox

Firefox nécessite une approche différente en utilisant les propriétés scrollbar-width et scrollbar-color :

@-moz-document url-prefix() {
  .scrollbar-container {
    scrollbar-width: thin;           /* Width of the scrollbar */
    scrollbar-color: fuchsia white;  /* thumb and track colors */
  }  
}

Considérations de conception

La mise en œuvre comprend plusieurs choix de conception réfléchis :

1. Rayon de bordure : La valeur 100vw crée des coins parfaitement arrondis pour la piste et le pouce.
2. Largeur minimale : Une largeur de 4 px maintient la barre de défilement visible mais discrète.
3. Schéma de couleurs : La piste blanche avec le pouce prune/fuchsia offre un bon contraste tout en conservant l'attrait visuel.
4. Typographie cohérente : Le design utilise la famille de polices Rubik pour une meilleure lisibilité :

@import url(https://fonts.googleapis.com/css2?family=Rubik);

Variables CSS

L'exemple utilise des variables CSS pour une thématique cohérente :

:root {
  --primary-text-color: #222;
  --secondary-text-color: #fff;
  --primary-bg-color: #222;
  --secondary-bg-color: #fff;
  --tertiary-bg-color: #ddd;
}

Compatibilité du navigateur

• Navigateurs WebKit (Chrome, Safari, Edge) : prise en charge complète pour une personnalisation détaillée
• Firefox : personnalisation simplifiée avec la largeur et la couleur de la barre de défilement
• Internet Explorer : pas de prise en charge des barres de défilement personnalisées
• Legacy Edge : support limité

Meilleures pratiques

1. Maintenir la convivialité : Gardez la barre de défilement visible et fonctionnelle
2. Style cohérent : faites correspondre les couleurs de la barre de défilement avec le thème de votre site
3. Tests : vérifiez l'apparence sur différents navigateurs
4. Conception réactive : réfléchissez à la façon dont la barre de défilement apparaît dans différentes tailles de fenêtre

Résultat final

Conclusion

Les barres de défilement personnalisées peuvent améliorer l'attrait visuel de votre application Web tout en conservant les fonctionnalités. En suivant ces modèles et en tenant compte de la compatibilité entre navigateurs, vous pouvez créer une expérience de défilement cohérente et attrayante pour vos utilisateurs.

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!