Discussion :

[ledebutant1]

Salut, depuis presque 2 jours j'essaye de resoudre un problème Avec mon code.

pour changer et spécialiser mon documemt, j'ai du utiliser le jquery.

Voici mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="category">
liste....
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$('.category').each(function(){
            var scrollPane = $(this).jScrollPane({
                arrowScrollOnHover: false,
                showArrows: true,
            });
            var api = scrollPane.data('jsp');
            console.log(scrollPane.data('jsp'));
            scrollPane.bind( 
                'mousewheel',
                function (event, delta, deltaX, deltaY) 
                { 
                    api.scrollByY(50);
 
                    return false;
                } 
 
            );
        });

Je veux permettre le défilement vertical dans ce div et d'autres. ce qui n'était pas possible avant puisque c'est toute la page qui défilait.

Avec ce code, dès que la main de ma souris se trouve sur mon div. la page ne défile plus, rien que le div. jusque là c'est bon.

Mon problème est le suivant: ce code permet tout simplement le défilement vers le bas. Egal meme si je cherche à défiler vers le haut.
Que dois je faire s'il vous plaît?
je vois dans la fonction, delta, deltaX, deltaY. Où est ce que je les définis?

J'ai trouvé ceci : http://www.adomas.org/javascript-mouse-wheel/
mais je ne comprends rien. suis nouceau sur js.

Je vous remercie pour plus d'éclaircissement et codes pour permettre le défilement tant vers le haut.

[NoSmoking]

Bonjour,

je vois dans la fonction, delta, deltaX, deltaY. Où est ce que je les définis?

tu ne les définis pas c'est le plugin qui te les met à disposition pour que tu puisses réagir en fonction de leur valeurs.

Fait un petit console.log( delta) et observe le signe en fonction du déplacement réalisé à la molette.

[ledebutant1]

Merci.

Comment changer le code afin que le défilement vers le haut puisse aussi être possible?

[NoSmoking]

As tu eu la curiosité d'essayer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

api.scrollByY( delta * 50);

[ledebutant1]

Salut NoSmoking,

As tu eu la curiosité d'essayer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

api.scrollByY( delta * 50);

oui je l'ai essayé. et il ne fonctionne pas. Même le défilement vers le bas ne se produit plus.
Voici ce que la console me présente:

handler(event=Object { originalEvent=Event DOMMouseScroll, type="mousewheel", timeStamp=2456516, mehr...})513e5d0...heel.js (Zeile 75)
10
0

Quand j'utilise par contre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

api.scrollByY( 50);

Le défilement vers le bas est possible quelque soit l'orientation de ma molette.

J'ai essayé de voir la valeur console.log( delta), console.log( deltaX) et console.log( deltaY);

les 3 delta me présentent "0" égal l'orientation de la molette. Est ce normal? Je croyais que j'obtiendrais +1 si la molette est dirigée vers le bas et -1 si elle est dirigée vers le haut.

y a t'il une erreur ds le code?

[Bovino]

quelque soit l'orientation de ma souris

[ledebutant1]

Merci j'ai changé. je voulais parler de la mollette de souris et non de la souris elle même.

[ledebutant1]

Salut,

je pense avoir trouvé où se trouve mon problème. Quand je change mon code ainsi:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

api.scrollByY(-50);

alors le défilement s'effectute vers le haut et ce, égal la direction de la rolette. Je pense que mon code ne reconnait pas le delta.
effectivement mon delta est toujours "0". Comment puis je resoudre ce problème?

Il devrait être possible, d'écrire ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
scrollPane.bind( 'mousewheel', function (event, delta, deltaX, deltaY){
    if (delta <0){
        api.scrollByY(-50); vers le haut
    }
    else{
        api.scrollByY(50); vers le bas
    }
    return false;
});

mais comment avoir les données de delta?

[ledebutant1]

j ai pu resoudre mon problème.

Il me fallait juste capter les valeurs de delta, ce que j'ai pu faire avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
event = event.originalEvent;
 
var delta = event.wheelDelta>0||event.detail<0?1:-1;

[ledebutant1]

salut une fois de plus.

je viens de constater que mon scroll fonctionne très bien et est compatible à presque ts les browser. Mais Internet explorer ne fonctionne pas comme prévu. il scrolle seulement UNE fois et s'arrête. j'ai googelt et trouvé le event pour internet explorer:

wheelDelta

Comment l'insérer ds mon code afin que ce dernier puisque scroller sans interruption:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
event = event.originalEvent;
 
var delta = event.wheelDelta>0||event.detail<0?1:-1;

console.log(event.wheelDelta) donne

120 ou -120

et ce une fois, égal autant de fois je cherche à défiler le contenu du div que dois je faire pour maintenir le défilement ?

merci d'avance!

[NoSmoking]

J'ai un peu de mal à comprendre ta démarche, d'abord tu passe par un plugin pour t'affranchir des navigateurs et ensuite tu reviens au vanilla pour te compliquer la vie.

Pour IE, Chrome et Opéra il faut diviser par 120, pour FireFox diviser par 3, mais tous ceci est expliqué dans le lien que tu as indiqué Mouse wheel programming in JavaScript (la référence en la matière).

Sinon en regardant la documentation du plugin on trouve cette démo intéréssante et qui pourrait te convenir pour peu que nous soyons au courant de ce que tu souhaites vraiment faire.

[ledebutant1]

ca fonctionne. Le problème était mon jquery. Je devais télécharger l'actuel.

merci NoSmoking.