Advertisement
  1. Web Design
  2. CSS

Conseil rapide : Styler les barres de défilement pour correspondre à votre design d'interface

by
Read Time:8 minsLanguages:

French (Français) translation by Henri Lotin (you can also view the original English article)

Cette astuce va vous guider dans l’amélioration de l’apparence des barres de défilement pour correspondre à votre design d’interface. Nous allons jeter un coup d’oeil à ce que les navigateurs WebKit nous offrent en termes de CSS, ensuite nous allons utiliser un fallback jQuery pour prendre en charge les autres navigateurs.

À la recherche d'un raccourci ?

Si vous avez besoin d’aide avec le style d'un élément particulier de votre site Web, il peut être plus rapide d’obtenir de l’aide auprès d’un professionnel. Envato dispose d’experts prêts à aider à re-styler ou personnaliser toutes sortes de composants web.

Web component services on Envato StudioWeb component services on Envato StudioWeb component services on Envato Studio

Petit mot sur les navigateurs

Lorsque nous parlons de navigateurs basés sur Webkit nous parlons essentiellement de Apple Safari et de Google Chrome. Ensemble, ils détiennent actuellement plus de 40 % du marché du navigateur de bureau dans l’ensemble. Pour les tablettes, iPad de Apple utilisera toujours Webkit, quel que soit le navigateur d'entreprise utilisé. Google a également ajouté Chrome à son système d’exploitation Android et les Chromebooks reposent bien sûr sur Google Chrome.

En regardant ces chiffres, ça devrait être un avenir très prometteur pour le style de barre de défilement !


Étape 1 : Une page simple avec des barres de défilement

Avant que nous puissions commencer avec le sujet réel du style des barres de défilement avec CSS, nous avons besoin d’une démo fonctionnelle ; une page avec des barres de défilement. Les barres de défilement sont visibles si :

  • le contenu est plus grand que la zone de fenêtre visible (une barre de défilement s’affiche sur la droite).
  • Une textarea (zone de texte) contient suffisamment de texte pour que les barres de défilement apparaissent.
  • Un iframe est utilisé pour afficher une page différente.
  • Une div ou tout autre élément de bloc a sa propriété overflow définie.

Pour des raisons de cette démonstration, nous irons avec la dernière option. Voici mon premier balisage :

C’est juste une div avec beaucoup de contenu factice. Et voici le CSS initial, qui définit des dimensions fixes et déclenche des barres de défilement horizontales et verticales :

Vous devriez être capable de voir quelque chose de semblable à ceci :


Etape 2 : Commencer par les navigateurs Webkit

Parfois retourner en arrière (plusieurs années) CSS Pseudo éléments ont été introduits dans les navigateurs Webkit pour cibler​ les barres de défilement, donnait l’occasion au style de votre page selon votre thème.

Commençons par styler quelque chose, en utilisant le préfixe -webkit- et les propriétés de barre de défilement personnalisées​ de webkit. N’oubliez pas que je m’en tiens juste aux propriétés CSS de base pour la facilité de compréhension, avec explication dans les commentaires.

Lorsque ce pseudo-élément est présent, WebKit va annuler son rendu de barre de défilement intégré et il suffit d’utiliser les informations fournies dans le CSS. - Surfin' Safari

Et maintenant pour certains des autres pseudo-éléments :

Après avoir ajouté ce CSS, vous devriez être en mesure de voir l’effet suivant (encore une fois, juste les navigateurs Webkit).

Devinez quoi ? Internet Explorer a son propre style de barre de défilement !

C’est vrai - en réalité IE était le premier navigateur à jamais prendre en charge le style des barres de défilement grâce au CSS. Il s’agissait à l’époque de IE 5.5, mais seulement la couleur peut être changée.

Ces propriétés peuvent toujours être utilisées aujourd'hui ; jetez un oeil à cette propriété unique sur IE 9 à des fins de démonstration :

Voici à quoi elle ressemblerait :


Étape 3 : Fallback pour les navigateurs non-webkit

Assez sur WebKit. Firefox, IE et Opera peuvent également se joindre à la fête. Pour eux, nous avons une très belle approche fallback sous forme de jScrollPane. Ce plugin jQuery est développé par Kelvin Luck et il sera notre sauveur pour la journée.

Le site web de Kelvin a beaucoup de bons exemples, mais pour une utilisation de base tout ce que nous devons faire est de télécharger jQuery et les fichiers jScrollPane et les mettre en œuvre de la manière suivante :

Juste pour les besoins de correspondance à notre thème, nous allons ouvrir jquery.jscrollpane.css et modifier les lignes suivantes avec nos valeurs de couleur (pour les améliorations de performances, vous pouvez placer tous les styles au sein de vos propres fichiers) :

Voici une capture d’écran de ce que vous verrez dans Firefox :


Conclusion

Les applications web comme Gmail et Google+ (ainsi que de nombreux autres exemples) ont déjà accepté l’idée, et si cette dynamique se poursuit, peut-être Firefox et IE fourniront également leurs propres solutions.

J’espère que vous avez apprécié cette astuce et j’ai hâte de voir ce que vous faites avec les barres de défilement dans votre travail de design !


Ressources supplémentaires

Barres de défilement sur Envato Market

Si vous cherchez une solution toute faite, Envato Market propose une sélection de barres de défilement que vous pouvez brancher sur votre site web pour obtenir tout un éventail d’effets. Voici un regard sur certains d'entre eux :

1. Lazybars - Themeable responsive scrollbar jQuery plugin

Lazybars est un facile à utiliser, un plugin jQuery de personnalisation de barre de défilement. Vous pouvez implémenter ces scrollbars juste en ajoutant un nom de classe à tout élément scrollable sur votre site web.

Assurez-vous d’utiliser les thèmes fournis avec Lazybars, ou créez les vôtres avec quelques CSS simples.

Lazybars - Themeable responsive scrollbar jQuery pluginLazybars - Themeable responsive scrollbar jQuery pluginLazybars - Themeable responsive scrollbar jQuery plugin
Lazybars - Themeable responsive scrollbar jQuery plugin

2. Fancy Scrollbar - WordPress

« Fancy Scrollbar – WordPress » est un plugin qui peut créer une barre de défilement personnalisée sur les sites WordPress. Il a beaucoup d’options de personnalisation. Vous pouvez personnaliser la couleur, les effets, le délai de défilement, la bande de rail et beaucoup plus de paramètres.

Fancy Scrollbar - WordPressFancy Scrollbar - WordPressFancy Scrollbar - WordPress
Fancy Scrollbar - WordPress

3. Awesome Custom Scrollbar

Awesome Custom Scrollbar est un plugin jQuery de barre de défilement personnalisé hautement personnalisable pour votre site WordPress. Avec ce plugin, vous pouvez personnaliser votre barre de défilement de page web, et vous pouvez incorporer une barre de défilement personnalisée via shortcode où que vous voulez, même dans les fichiers de thème.

Awesome Custom ScrollbarAwesome Custom ScrollbarAwesome Custom Scrollbar
Awesome Custom Scrollbar

4. DZS Scroller

DZS Scroller fournit une barre de défilement pour votre site que vous pouvez personnaliser très facilement via CSS si les trois habillages inclus ne suffisent pas. Il est également livré avec des fonctionnalités améliorées, comme le défilement par hover ou fade on au départ de la souris. Et ça marche sur iPhone/iPad.

DZS ScrollerDZS ScrollerDZS Scroller
DZS Scroller

5. CSS3 Scrollbar Styles

C'est facile d’utiliser la barre de défilement belle et colorée de CSS3 pour votre site web. Insérez simplement dans le fichier CSS existant et profitez de la nouvelle barre de défilement de CSS3.

CSS3 Scrollbar StylesCSS3 Scrollbar StylesCSS3 Scrollbar Styles
CSS3 Scrollbar Styles
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.