Se connecter Recherche

Vous développer des sites internet, que ce soit pour une envie personnelle ou votre coeur de métier, et portez un grand attachement à personnaliser chaque éléments pour que ce site reflète votre soucis du détail. Et à chaque fois vous vous heurter à un élément natif des navigateurs web et présentant un style qui n’a pas changé depuis Windows 2000: La barre de scroll et son superbe curseur arborant un dégradé gris « passe-partout »!

epica design

Et bien maintenant c’est terminé. Vous allez enfin, grâce à un petit plugin jQuery, pouvoir en choisir la largeur, la couleur, le background et quelques autres paramètres: l’astuce, intégrer jquery.nicescroll.js dans votre code.

Ce dernier vous permettra de créer directement un style pour votre barre de défilement, de déterminer son utilisation sur tel ou tel élément en utilisant des filtres par id ou class et intervient sans modification de la largeur de fenêtre.

Utiliser nicescroll

Après avoir récupéré le fichier source, procédez à son appel dans votre page HTML. Je vous rappelle que ce plugin requiert l’utilisation de jQuery dans une version supérieure à 1.5 (à ce jour, ce ne devrait pas être un problème).

<script src="mon_chemin_de_fichier/jquery.min.js"></script>
<script src="mon_chemin_de_fichier/jquery.nicescroll.min.js"></script>

Puis de lancer l’exécution de la fonction:

// Mode classique - cible la barre de scroll générale
    $(document).ready(function() {  
        $("html").niceScroll();
    });

Nicescroll.js désactivera automatiquement la barre de scroll native du navigateur, je vous conseil néanmoins de fixer cette modification par une simple ligne de code CSS:

<style>
body {overflow:hidden}
</style>
</head>

Personnaliser ses barres de scroll

Plusieurs options sont ensuite disponibles pour vous permettre de sélectionner un élément particulier et modifier les couleurs par défaut de cette barre de scroll. Ces paramètres sont à définir lors du lancement de la fonction.

$(document).ready(function() {
// Mode classique - cible la barre de scroll générale
$("html").niceScroll();
// Modifier la couleur du curseur
$("html").niceScroll({cursorcolor:"#91c225"});
// Modifier la couleur du background du curseur
$("html").niceScroll({cursorcolor:"#91c225",background:"#000"});
// Modifier la largeur, les bordures, l'arrondi
$("html").niceScroll({
cursorcolor:"#91c225",background:"#000",cursorwidth: 6,cursorborder: "0px solid transparent", cursorborderradius: "0px"});
// Cibler un élément (par class ou id)
$("#ma_div").niceScroll();
 });

Ne copier/coller pas ce morceau de code en brut, choisissez a ligne qui vous intéresse.

Pour conclure, nicescroll.js est pratique et répond à une demande réelle de ceux qui attachent une importance au détails les plus minime lors de la création de leur design web. D’autres éléments peuvent aussi être personnaliser mais je vous laisse en découvrir l’intégralité sur la page Github du créateur de ce plugin.

 

Commentaires Écrire un commentaire

  • ThomasC le 7 novembre 2014 at 22 h 18 min Répondre

    Super interessant comme plugin, merci pour le partage

  • happy32x le 23 avril 2016 at 22 h 42 min Répondre

    Que celui qui lit ces lignes sache que nicescroll ce n’est pas de la blague.
    Il viens de me sauver.
    GRAND MERCI !!!

  • Sana le 4 octobre 2016 at 10 h 20 min Répondre

    Bonjour,
    J’ai un problème de compatibilité avec internet explorer.
    En effet ça fonctionne avec les autres navigateurs, mais dès que j’essaye avec IE ou Edge, je ne peux plus scroller, la page est figée.
    Avez-vous une solution?

    Merci.

  • Santu le 22 décembre 2017 at 12 h 11 min Répondre

    intéressant comme plugin
    je vous le recommande

  • corentin le 16 avril 2018 at 22 h 39 min Répondre

    Super, Merci !!!!


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

*