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

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.

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 :

<div class="container">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus tortor eget orci fringilla non semper magna aliquet. Aliquam convallis elit sem. Proin fringilla fermentum pretium. Phasellus id nisl eu eros convallis eleifend. In hac habitasse platea dictumst. In at felis massa. Maecenas vitae quam non elit porta pellentesque ac in erat. Nullam a ante felis, ullamcorper suscipit felis. Maecenas sit amet nisl mattis ipsum ullamcorper aliquam vitae sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

    <p>Sed sed tellus dolor, non lobortis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eget nisl viverra risus feugiat vulputate tempus et leo. Nam metus nibh, tristique non sodales non, interdum et neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet aliquet vestibulum. Curabitur viverra tortor augue, a aliquet tellus. Vivamus eu felis vel lorem tincidunt imperdiet. Fusce iaculis luctus convallis. Proin adipiscing malesuada enim, et feugiat tortor sagittis eu. Cras convallis felis eu leo tempus et fermentum urna accumsan. In quis metus at metus ultricies fringilla. Maecenas sed lacus aliquam nibh semper dignissim et quis est.</p>
    
    <p>Praesent sodales, sapien sit amet congue egestas, sem ligula ornare massa, vitae suscipit felis ligula quis velit. Phasellus lectus massa, sodales ac vulputate ac, pharetra quis lacus. Morbi tempus pretium nisi sed pretium. Pellentesque dictum volutpat vulputate. Fusce dapibus sagittis felis, ut consequat nisi posuere id. Cras elit orci, vehicula in sagittis a, faucibus vitae dui. Nunc non lorem in metus adipiscing adipiscing non a sapien. Sed dictum ultrices nibh in tristique. Nulla dapibus laoreet tincidunt. Sed accumsan erat quis mi luctus porta.</p>

    <p>Sed mollis justo enim, ut pharetra nunc. Fusce vehicula viverra magna, et fringilla lectus porta quis. Donec eu fermentum mi. Donec congue pellentesque iaculis. Phasellus est leo, cursus eget consectetur in, tristique sit amet tortor. Cras eleifend felis sit amet eros vehicula aliquet. Pellentesque fringilla metus in libero luctus eu condimentum nulla pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat sodales lorem, nec dignissim turpis pharetra et. Nullam commodo hendrerit elementum. Donec porta faucibus ligula non blandit. In ultrices vehicula pretium.</p>

    <p>Sed ac sagittis sapien. Curabitur varius pellentesque nunc eget molestie. Vivamus in massa arcu, ut auctor tellus. Aliquam convallis lobortis magna, ut posuere odio euismod ac. Vestibulum in enim vitae metus vulputate interdum. Mauris a risus auctor nunc fermentum dapibus. Proin iaculis, nunc ut viverra varius, augue augue porta libero, id viverra nisl elit in mauris. Aenean quis risus ante. Donec bibendum erat a sem vestibulum eu aliquet lectus tincidunt. Vivamus imperdiet congue leo, non ultricies urna sodales sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla vitae rhoncus dui. Nunc in nisi in ante imperdiet tincidunt sagittis eu ipsum. Aenean orci justo, faucibus placerat tincidunt vitae, vehicula at libero.</p>

</div>

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 :

  .container {
		  width: 400px;
		  height: 300px;
		  background-color: #DCDCDC;
		  overflow: scroll; /* showing scrollbars */
	}

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.

1	::-webkit-scrollbar {
2	width: 15px;
3	} /* this targets the default scrollbar (compulsory) */

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 :

	::-webkit-scrollbar-track {
		  background-color: #b46868;
	} /* the new scrollbar will have a flat appearance with the set background color */

	::-webkit-scrollbar-thumb {
		  background-color: rgba(0, 0, 0, 0.2); 
	} /* this will style the thumb, ignoring the track */

	::-webkit-scrollbar-button {
		  background-color: #7c2929;
	} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

	::-webkit-scrollbar-corner {
		  background-color: black;
	} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */

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 :

1	body {
2	scrollbar-face-color: #b46868;
3	}

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 :

	<!-- this cssfile can be found in the jScrollPane package -->
	<link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" />

	<!-- latest jQuery direct from google's CDN -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<!-- the jScrollPane script -->
	<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>

	<!--instantiate after some browser sniffing to rule out webkit browsers-->
	<script type="text/javascript">
	
	  $(document).ready(function () {
	      if (!$.browser.webkit) {
	          $('.container').jScrollPane();
	      }
	  });
	
	</script>
				
</body>

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) :

	.jspTrack
	{
		background: #b46868; /* changed from #dde */
		position: relative;
	}

	.jspDrag
	{
		background: rgba(0,0,0,0.2); /* changed from #bbd */
		position: relative;
		top: 0;
		left: 0;
		cursor: pointer;
	}

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

Custom Scrollbars in WebKit par Chris Coyier
Styling Scrollbars sur webkit.org

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 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.

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.

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.

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.