Apparence scrollbar personnalisé en jQuery

[Oxalys]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Plusieurs utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bien le bonjour à tous et toutes,

Après de nombreuses recherches j’ai bien compris que Firefox n’aimait pas que l’on touche à l’apparence de ses scrollbars. Seulement beh faut bien l’avouer… elles sont moches leurs scroll ! C’est donc pour cette raison que je fais appel à une ou plusieurs âmes généreuses qui pourront m’aider puisque mes recherches m’ayant mené à savoir que c’était une chose possible que via jQuery et c’est une chose que je ne maitrise absolument pas J’ai bien trouvé un tuto explicatif, seulement la malchance étant totalement de mon côté il est totalement en anglais, langue que je ne maitrise pas non plus ::betise::

Donc voilà, j’espère qu’une âme bienfaitrice pourra m’aider, merci à vous d’avance

[IzumiRK]

Est-ce que tu peux m'envoyer ton tuto explicatif ? Je peux te le traduire en français

[Oxalys]

Je te fais ça

[Oxalys]

UP

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Oxalys]

Toujours d'actu

[Oxalys]

Up

[Oxalys]

Up

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Oxalys]

Toujours d'actu

[Lixyr]

Bonjour,

Avez-vous essayé ceci ?
> modifier scrollbar

[Oxalys]

J'ai ceci dans mon CSS, mais sous mozilla rien ne change.

Code:

/**************************************************** DÉBUT SCROLLBAR ****************************************************/
::-webkit-scrollbar {  height: 0.5px;  width: 1.5px;  background-color: #EBF0EF; /* couleur de fond */}
 
html > ::-webkit-scrollbar {  width: 1.5px; /*largeur de la barre*/}
 
::-webkit-scrollbar-thumb {  background: #DFDEBF; /* couleur de la barre qui se déplace */}
 
::-webkit-scrollbar-track-piece {  background-color:#EBF0EF; /* couleur de fond */}
::-ms-scrollbar {  height: 0.5px;  width: 1.5px;  background-color:#EBF0EF; /* couleur de fond */}
 
html > ::-ms-scrollbar {  width: 1.5px; /* largeur de la barre */}
 
::-ms-scrollbar-thumb {  background: #EBF0EF; /* couleur de la barre qui se déplace */}
 
::-ms-scrollbar-track-piece {  background-color: #EBF0EF; /* couleur de fond */}
::-moz-scrollbar {  height: 0.5px;  width: 1.5px;  background-color: #EBF0EF; /* couleur de fond */}
 
html > ::-moz-scrollbar {  width: 1.5px; /* largeur de la barre */}
 
::-moz-scrollbar-thumb {  background: #DFDEBF; /* couleur de la barre qui se déplace */}
 
::-moz-scrollbar-track-piece {  background-color: #EBF0EF; /* couleur de fond */}
::-o-scrollbar {  height: 2px;  width: 1.5px;  background-color: #EBF0EF; /* couleur de fond */}
 
html > ::-o-scrollbar {  width: 0.5px; /* largeur de la barre */}
 
::-o-scrollbar-thumb {  background: #DFDEBF; /* couleur de la barre qui se déplace */}
 
::-o-scrollbar-track-piece {  background-color: #EBF0EF; /* couleur de fond */}

/**************************************************** FIN SCROLLBAR ****************************************************/

Et je viens de tester le code proposé, rien n'a changé.

[Lixyr]

En effet. Firefox, toujours à la traine. Pour ce navigateur, il faut effectivement passer par JavaScript. Je vais voir à trouver un tuto pas trop dur à comprendre, ou à expliquer.

[Oxalys]

Merci beaucoup

[Oxalys]

Up

[Invité]

Hello Oxalys,

tu as ce script nicescroll qui pourrait répondre à ta demande:
http://epicadesign.fr/personnaliser-votre-barre-de-scroll/


Va sur cette page html:

https://raw.githubusercontent.com/inuyaksa/jquery.nicescroll/master/jquery.nicescroll.js

sélectionnes tout le contenu et déposes celui-ci dans le module suivant;

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Coches sur toutes les pages.
Déposes le contenu sélectionné:


Penses à cliquer sur le bouton


Ensuite on va créer un autre pour faire l'appel.

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Coches sur toutes les pages.

Déposes ceci:

Code:


$(function(){
  $('body').niceScroll();  // let's do the magic!
});



Penses à cliquer sur le bouton

Ensuite tu peux paramétrer cette scroolbar pour son apparence dans le premier script ici:

Code:


var _globaloptions = {
    zindex: "auto",
    cursoropacitymin: 0,
    cursoropacitymax: 1,
    cursorcolor: "#424242",
    cursorwidth: "6px",
    cursorborder: "1px solid #fff",
    cursorborderradius: "5px",
    scrollspeed: 60,
    mousescrollstep: 8 * 3,
    touchbehavior: false,  // deprecated
    emulatetouch: false,    // replacing touchbehavior
    hwacceleration: true,
    usetransition: true,
    boxzoom: false,
    dblclickzoom: true,
    gesturezoom: true,
    grabcursorenabled: true,
    autohidemode: true,
    background: "",
    iframeautoresize: true,
    cursorminheight: 32,
    preservenativescrolling: true,
    railoffset: false,
    railhoffset: false,
    bouncescroll: true,
    spacebarenabled: true,
    railpadding: {
      top:0,
      right: 0,
      left: 0,
      bottom: 0
    },

La largeur se trouve ici:

Code:

 cursorwidth: "6px",

La bordure ici:

Code:

cursorborder: "1px solid #fff",

Les arrondis ici:

Code:

cursorborderradius: "5px",

Ensuite si tu as activé la toolbar il faudra remplacer le 0 par 30 ici:

Code:

   
railpadding: {
      top:0,


.

a++

[Oxalys]

Bonjour,

Merci pour ta réponse !
Après avoir mis les deux java, toujours aucun changement des scroll' sous firefox :/

[Invité]

Hello Oxalys,

hum, le script ne figure pas sur le forum mentionné dans ta demande.
Tu as bien coché sur toutes les pages pour les deux scripts ?

a++

[Oxalys]

Pourtant il y est, alors en fait je viens de comprendre ! La scrollbar a droite c'est good, mais est-ce qu'il y a un moyen de l'appliquer a toutes les scrollbar du forum ? (notamment pour le profil surtout)

[Invité]

Re,
hum il vaudrait mieux te contenter des scrolls actuels sous risque d'avoir un visu tronqué.


a++

[Oxalys]

D'accords, merci beaucoup à toi !!