Personaliser sa scrollbar (JS)

WWT | VectorXHD

WWT | VectorXHD

Premium
Inscription
4 Janvier 2013
Messages
485
Réactions
148
Points
19 823
RGCoins
105
Yo tout le monde !

Aujourd’hui je vais vous montrer comment customiser sa scrollbar sur son site

Il y a déjà le tutoriel à @Weyzen' mais il marche uniquement sur Chrome et Safari

Donc aujourd'hui le tutoriel marche pour tout les navigateur normalement (J'ai pas tout test)

Commençons !

Il faudra allez
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.


Vous allez cliquer sur "download"

Vous allez récupérer les fichier suivant:
"jquery.mCustomScrollbar.concat.min.js"
"jquery.mCustomScrollbar.min.css"

Vous allez les inclure a votre html ou a votre php avec les attribut :
<link />
<script></script>

Une fois fait il faudra initialiser le jQuery
donc avant la fermeture du </head> vous ajouter ce code

Code: 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
    (function($){
        $(window).on("load",function(){
            $("body").mCustomScrollbar({
  theme:"dark"
});
        });
    })(jQuery);
</script>

vous modifier le "dark" par ce que vous voulez comme thème

Liste des theme
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

Voila normalement votre scrollbar sera modifier

Je tiens a préciser que avec bootstrap j'ai eu quelque problème avec cette scrollbar


Pour ceux qui galère voila un projet que j'ai réaliser
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

La clé de déchiffrement si demander: !NyJkx2uwndAIt3kF_ksmBl-wWxonB_LJ7ZLjexwTbM4

Il ce peux que la scrollbar n'apparaisse pas il faut simplement retirer le "<!DOCTYPE html>"

Voila pour toi @ReaZ RMK
​
Woin Woin Team - Fondateur - Helpeur
 
Merci du partage gars !
 
C'est bien beau tous sa mais je voudrai voir quelque chose dans le même truc sauf qu'on peut modifier les couleurs etc ...
 
WWT | VectorXHD a dit:
Yo tout le monde !

Aujourd’hui je vais vous montrer comment customiser sa scrollbar sur son site

Il y a déjà le tutoriel à @Weyzen' mais il marche uniquement sur Chrome et Safari

Donc aujourd'hui le tutoriel marche pour tout les navigateur normalement (J'ai pas tout test)

Commençons !

Il faudra allez
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.


Vous allez cliquer sur "download"

Vous allez récupérer les fichier suivant:
"jquery.mCustomScrollbar.concat.min.js"
"jquery.mCustomScrollbar.min.css"

Vous allez les inclure a votre html ou a votre php avec les attribut :
<link />
<script></script>

Une fois fait il faudra initialiser le jQuery
donc avant la fermeture du </head> vous ajouter ce code

Code: 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
    (function($){
        $(window).on("load",function(){
            $("body").mCustomScrollbar({
  theme:"dark"
});
        });
    })(jQuery);
</script>

vous modifier le "dark" par ce que vous voulez comme thème

Liste des theme
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

Voila normalement votre scrollbar sera modifier

Je tiens a préciser que avec bootstrap j'ai eu quelque problème avec cette scrollbar


Pour ceux qui galère voila un projet que j'ai réaliser
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

La clé de déchiffrement si demander: !NyJkx2uwndAIt3kF_ksmBl-wWxonB_LJ7ZLjexwTbM4

Il ce peux que la scrollbar n'apparaisse pas il faut simplement retirer le "<!DOCTYPE html>"

Voila pour toi @ReaZ RMK
​
Woin Woin Team - Fondateur - Helpeur
Cliquez pour agrandir...
Oui mes moi je croit quelle arrondie et toi elle simple
 
Retour
Haut