Apparence scrollbar personnalisé en jQuery

4 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Apparence scrollbar personnalisé en jQuery

Message par Oxalys Jeu 18 Mai 2017 - 9:13

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 Grrr 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 Sourire2


Dernière édition par Oxalys le Dim 18 Juin 2017 - 15:59, édité 2 fois
Oxalys

Oxalys
*

Messages : 44
Inscrit(e) le : 03/01/2012

https://cedarwood-creek.forumactif.com/
Oxalys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par IzumiRK Jeu 18 Mai 2017 - 17:28

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

IzumiRK
****

Messages : 206
Inscrit(e) le : 25/02/2015

http://indare.forumactif.com/
IzumiRK a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Oxalys Jeu 18 Mai 2017 - 17:30

Je te fais ça Smile
Oxalys

Oxalys
*

Messages : 44
Inscrit(e) le : 03/01/2012

https://cedarwood-creek.forumactif.com/
Oxalys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Oxalys Mar 23 Mai 2017 - 15:36

UP
Oxalys

Oxalys
*

Messages : 44
Inscrit(e) le : 03/01/2012

https://cedarwood-creek.forumactif.com/
Oxalys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Chacha Lun 29 Mai 2017 - 9:58

scrollbar mozilla - Apparence scrollbar personnalisé en jQuery UmaslZ4Bonjour,

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 »
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69301
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Oxalys Lun 29 Mai 2017 - 10:59

Toujours d'actu
Oxalys

Oxalys
*

Messages : 44
Inscrit(e) le : 03/01/2012

https://cedarwood-creek.forumactif.com/
Oxalys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Oxalys Jeu 1 Juin 2017 - 16:13

Up
Oxalys

Oxalys
*

Messages : 44
Inscrit(e) le : 03/01/2012

https://cedarwood-creek.forumactif.com/
Oxalys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Oxalys Dim 4 Juin 2017 - 11:18

Up
Oxalys

Oxalys
*

Messages : 44
Inscrit(e) le : 03/01/2012

https://cedarwood-creek.forumactif.com/
Oxalys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Chacha Sam 10 Juin 2017 - 10:00

scrollbar mozilla - Apparence scrollbar personnalisé en jQuery UmaslZ4Bonjour,

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 »
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69301
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Oxalys Sam 10 Juin 2017 - 10:02

Toujours d'actu
Oxalys

Oxalys
*

Messages : 44
Inscrit(e) le : 03/01/2012

https://cedarwood-creek.forumactif.com/
Oxalys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Lixyr Lun 12 Juin 2017 - 22:58

Bonjour,

Avez-vous essayé ceci ?
> modifier scrollbar


Pour faciliter les recherches, mettez un titre explicite.
Remerciez scrollbar mozilla - Apparence scrollbar personnalisé en jQuery 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu scrollbar mozilla - Apparence scrollbar personnalisé en jQuery 3592387030 pour prévenir la modération.

scrollbar mozilla - Apparence scrollbar personnalisé en jQuery Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Oxalys Lun 12 Juin 2017 - 23:06

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

Oxalys
*

Messages : 44
Inscrit(e) le : 03/01/2012

https://cedarwood-creek.forumactif.com/
Oxalys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Lixyr Lun 12 Juin 2017 - 23:25

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.


Pour faciliter les recherches, mettez un titre explicite.
Remerciez scrollbar mozilla - Apparence scrollbar personnalisé en jQuery 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu scrollbar mozilla - Apparence scrollbar personnalisé en jQuery 3592387030 pour prévenir la modération.

scrollbar mozilla - Apparence scrollbar personnalisé en jQuery Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Oxalys Lun 12 Juin 2017 - 23:31

Merci beaucoup Smile
Oxalys

Oxalys
*

Messages : 44
Inscrit(e) le : 03/01/2012

https://cedarwood-creek.forumactif.com/
Oxalys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Oxalys Sam 17 Juin 2017 - 10:02

Up
Oxalys

Oxalys
*

Messages : 44
Inscrit(e) le : 03/01/2012

https://cedarwood-creek.forumactif.com/
Oxalys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Invité Sam 17 Juin 2017 - 12:01

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 boutonscrollbar mozilla - Apparence scrollbar personnalisé en jQuery Boutonvalider


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 boutonscrollbar mozilla - Apparence scrollbar personnalisé en jQuery Boutonvalider

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,

Wink .

a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Oxalys Dim 18 Juin 2017 - 14:48

Bonjour,

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

Oxalys
*

Messages : 44
Inscrit(e) le : 03/01/2012

https://cedarwood-creek.forumactif.com/
Oxalys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Invité Dim 18 Juin 2017 - 15:33

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++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Oxalys Dim 18 Juin 2017 - 15:48

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

Oxalys
*

Messages : 44
Inscrit(e) le : 03/01/2012

https://cedarwood-creek.forumactif.com/
Oxalys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Invité Dim 18 Juin 2017 - 15:51

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


a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Oxalys Dim 18 Juin 2017 - 15:58

D'accords, merci beaucoup à toi !! Yes
Oxalys

Oxalys
*

Messages : 44
Inscrit(e) le : 03/01/2012

https://cedarwood-creek.forumactif.com/
Oxalys a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum