Voulez-vous ajouter une barre de défilement personnalisée dans WordPress ? Changer l'apparence de la barre de défilement peut vous aider à vous démarquer spécialement lors de la création d'un thème personnalisé pour votre site Web.

Dans cet article, nous allons vous montrer comment ajouter facilement une barre de défilement personnalisée dans WordPress. Nous allons vous montrer deux solutions et vous pourrez choisir celle qui vous convient le mieux.

Ajouter une barre de défilement personnalisée dans WordPress

Problèmes avec les couleurs de barre de défilement personnalisées

Par défaut, CSS n'est pas fourni avec un ensemble de règles qui vous permettrait de modifier les propriétés de la barre de défilement. Il y a quelques propositions pour ajouter cela, mais elles ne sont pas prises en charge par la plupart des navigateurs pour le moment.

Pour surmonter cela, les concepteurs et les développeurs utilisent des pseudo-éléments spécifiques au navigateur ou JavaScript pour remplacer l'apparence par défaut de la barre de défilement.

Nous allons vous montrer les deux techniques. Cependant, gardez à l'esprit que vous devez tester votre site avec différents navigateurs et appareils pour vous assurer qu'il fonctionne correctement sur tous les navigateurs.

Cela étant dit, voyons comment ajouter des couleurs de barre de défilement personnalisées dans WordPress.

Méthode 1. Ajouter une barre de défilement personnalisée dans WordPress avec un plugin

Cette méthode est plus simple et recommandée pour la plupart des utilisateurs. Cependant, il ne prend pas en charge les navigateurs mobiles.

Tout d'abord, vous devez installer et activer le Barre de défilement avancée brancher. Pour plus de détails, consultez notre guide étape par étape sur la façon d'installer un plugin WordPress.

Lors de l'activation, vous devez vous diriger vers Paramètres » Paramètres de barre de défilement de couleur personnalisée page pour configurer le plugin.

Paramètres de couleur et d'arrière-plan de la barre de défilement

À partir de là, vous pouvez modifier la couleur de la barre de défilement et les couleurs d'arrière-plan des rails de la barre de défilement. Vous pouvez ensuite sélectionner le pas de défilement de la souris, qui correspond à la vitesse de défilement de la molette de la souris.

Vous pouvez également choisir de masquer automatiquement la barre de défilement ou de toujours l'afficher.

Vous avez la possibilité de choisir l'option “Curseur uniquement” qui afficherait le rail de la barre de défilement mais pas le bouton.

Options de défilement

En dessous, vous trouverez des options pour définir la vitesse de défilement, modifier l'alignement du rail (gauche ou droite) et activer le comportement tactile.

N'oubliez pas de cliquer sur le bouton Enregistrer les modifications pour enregistrer vos paramètres.

Vous pouvez maintenant visiter votre site Web pour voir vos couleurs de barre de défilement personnalisées en action.

Aperçu des couleurs de la barre de défilement personnalisée

Méthode 2. Ajouter des couleurs de barre de défilement personnalisées dans WordPress à l'aide de CSS

Cette méthode utilise CSS pour styliser votre barre de défilement, ce qui est plus rapide que d'utiliser jQuery.

Cependant, cela ne fonctionne que sur les navigateurs de bureau utilisant le moteur de rendu WebKit comme Google Chrome, Safari, Opera, etc.

Cela n'aura aucun effet sur les navigateurs mobiles ou Firefox et Edge sur les ordinateurs de bureau.

Vous devrez ajouter le CSS personnalisé suivant à votre thème WordPress.


::-webkit-scrollbar {
    -webkit-appearance: none;
}
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #ffb400; 
	border:1px solid #ccc;
}

::-webkit-scrollbar-thumb {
  background: #cc00ff; 
	border:1px solid #eee;
	height:100px;
	border-radius:5px;
}

::-webkit-scrollbar-thumb:hover {
  background: blue; 
}

N'hésitez pas à modifier les couleurs et autres propriétés CSS.

Une fois que vous êtes satisfait, n'oubliez pas d'enregistrer vos modifications. Après cela, vous pouvez le prévisualiser dans un navigateur pris en charge.

Voici à quoi cela ressemblait sur notre site Web de démonstration lors de la visualisation sur Google Chrome sur un ordinateur Mac.

Aperçu des couleurs personnalisées de la barre de défilement

Nous espérons que cet article vous a aidé à apprendre comment ajouter une barre de défilement personnalisée dans WordPress. Vous pouvez également consulter notre guide sur la façon de créer facilement un thème WordPress personnalisé sans écrire de code.

Si cet article vous a plu, abonnez-vous à notre Chaîne Youtube pour les didacticiels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.