mouse wheel ne fonctionne pas sur chrome et firefox

**taka10** · 19/08/2019, 11h17

Bonjour,

Voici un lien qui montre mon soucis : http://helios.s186997.alain_delcroix...-appartements/

Je voudrais que lorsqu'on scroll vers le haut ou le bas, on change de lot sur la roue, ça fonctionne sur safari mais pas sur les autres navigateurs, ça fonctionne mais c'est trop rapide.

Merci d'avance pour vos retours

Invité · 19/08/2019, 16h11

Mode Maintenance

**taka10** · 23/08/2019, 09h36

oups désolé c'est modifié

**taka10** · 26/08/2019, 09h32

Je met icic le code JS que j'utilise :

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
 
$(document).ready(function(){
    $('section').bind('DOMMouseScroll mousewheel', function(e){
 
    	var val=$('#lot_ec').val();
    	var val_a=val;
 
        if(e.originalEvent.wheelDelta /120 > 0) {
            val=parseInt(val)-1;
            if(val==0)
            	val=1;
            $('#lot_ec').val(val);
        }
        else{
            val=parseInt(val)+1;
            if(val==19)
            	val=18;
            $('#lot_ec').val(val);
        }				
 
 
		//lot Ã  mettre en arriÃ¨re
		var id='rp'+val_a;				
 
		//on agrandit le rayon principal
		$("#"+id).removeClass('rayon_gros');
 
		$("#"+id).children('.rond').find('.lot').removeClass('app');
		$("#"+id).children('.rond').find('p').removeClass('app');
 
		//on agrandit les autres
		$('.r2-'+id).removeClass('rayon_r2');
		$('.r3-'+id).removeClass('rayon_r3');
		$('.r4-'+id).removeClass('rayon_r4');
		$('.r5-'+id).removeClass('rayon_r5');
		$('.r6-'+id).removeClass('rayon_r6');
		$('.r7-'+id).removeClass('rayon_r7');
		$('.r8-'+id).removeClass('rayon_r8');
 
		if(id=="rp1")
		{
			$('.r2-rp19').removeClass('rayon_r2');
			$('.r3-rp19').removeClass('rayon_r3');
			$('.r4-rp19').removeClass('rayon_r4');
			$('.r5-rp19').removeClass('rayon_r5');
			$('.r6-rp19').removeClass('rayon_r6');
			$('.r7-rp19').removeClass('rayon_r7');
			$('.r8-rp19').removeClass('rayon_r8');
		}
 
		//nouveau lot Ã  mettre en avant
        var id='rp'+val;
 
		//on agrandit le rayon principal
		$("#"+id).addClass('rayon_gros');
 
		$("#"+id).children('.rond').find('.lot').addClass('app');
		$("#"+id).children('.rond').find('p').addClass('app');
 
		//on agrandit les autres
		$('.r2-'+id).addClass('rayon_r2');
		$('.r3-'+id).addClass('rayon_r3');
		$('.r4-'+id).addClass('rayon_r4');
		$('.r5-'+id).addClass('rayon_r5');
		$('.r6-'+id).addClass('rayon_r6');
		$('.r7-'+id).addClass('rayon_r7');
		$('.r8-'+id).addClass('rayon_r8');
 
		if(id=="rp1")
		{
			$('.r2-rp19').addClass('rayon_r2');
			$('.r3-rp19').addClass('rayon_r3');
			$('.r4-rp19').addClass('rayon_r4');
			$('.r5-rp19').addClass('rayon_r5');
			$('.r6-rp19').addClass('rayon_r6');
			$('.r7-rp19').addClass('rayon_r7');
			$('.r8-rp19').addClass('rayon_r8');
		}
 
		var n_slide=val;	
		slider.reloadSlider({
	        startSlide:parseInt(n_slide-1),	
		    controls: false,
		    pager: false,
		    infiniteLoop: false,
		    slideMargin: 0,
		    slideWidth: 600,
		    minSlides: 1,
		    maxSlides: 1,
		    moveSlides: 1,
		    mode: 'fade',
		    speed: 1000,
			touchEnabled: false,
		    auto: false	
	    });
    });
});

Sur safari, je n'ai aucun soucis, lorsque je scroll vers le haut ou vers le bas, on change de lot de 1 en 1. Sur chrome et Firefox, lorsque je scrolle vers le bas par exemple, je passe du lot 1 au lot 5 directement, c'est trop rapide en fait. Comment je peux gérer cela ?

Invité · 26/08/2019, 10h27

Bonjour,

1- taka utiliser un .setTimeout(), non ?

2- DOMMouseScroll (compatibilité)

Deprecated
This feature is no longer recommended.[...]
Non-standard

3- mousewheel (compatibilité)

Deprecated
This feature is no longer recommended.[...]
Non-standard

Important: Instead of this obsolete event, use the standard wheel event.

4-

Code :

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

1
2
3
4
5
             if(val==0)
            	val=1;
...
            if(val==19)
            	val=18;

On peut aussi passer du 18 au 1, et vice-versa :

Code :

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

1
2
3
4
5
             if(val==0)
            	val=18;
...
            if(val==19)
            	val=1;

Ainsi, on peut faire plusieurs fois le tour de la roue, sans "bloquer" sur le 18 ou le 1.

On peut aussi utiliser l'ASTUCE du "modulo"/"reste" : %.

x%18 : tous les multiples de 18 renvoient 0 (zéro)

**taka10** · 26/08/2019, 11h09

Bonjour et Merci pour ton retour.

Pour le point 1, je ne pense pas que le set timeout soit approprié, voici ce que je souhaite reproduire comme effet : https://waaark.com/vision/ , je souhaite modifier le comportement du scroll.

OK pour le 2 et le 3 , mais quoi mettre à la place ?

Pour le point 4, bien vu... Merci

Invité · 26/08/2019, 11h14

Bon,

1- j'ai testé aussi setTimeout : pas concluant...

2- standard wheel event

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
$(document).ready(function(){
    $('section').on('wheel', function(e){
 
    	e.originalEvent.preventDefault(); // évite le comportement par défaut (scroll de la page)
 
    	var val = $('#lot_ec').val();
    	var val_a = val;
 
        if( e.originalEvent.deltaY < 0) {
            val=parseInt(val)-1;
            if(val==0) val=18;
            $('#lot_ec').val(val);
        }else{
            val=parseInt(val)+1;
            if(val==19) val=1;
            $('#lot_ec').val(val);
        }
...

3- Par contre, je pense que le souci vient de la "vitesse" avec laquelle on tourne la molette, mais aussi des réglages de sensibilité (configuration propre à chacun), non ?
Testé sur Firefox

... mais il faut tourner lentement.

4- Mon écran fait 1920 pixels de large (x 768px de haut), et la roue est trop grande !
La fenêtre scrolle* donc aussi, ce qui est pénible.
N.B. Le changement de taille survient à 1800px -> il faudrait le passer à 1921px.

*ou, AU MOINS, ajouter :

Code :

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

    	e.originalEvent.preventDefault(); // évite le comportement par défaut (scroll de la page)

**taka10** · 26/08/2019, 11h30

Justement sur l'exemple que j'ai envoyé (https://waaark.com/vision/ sur process dans le menu en haut à droite), lorsqu'on tourne la molette rapidement ou doucement, on passe bien de un en un. C'est-à-dire que même si on fait 3 ou 4 scroll d'affilé, tant que le scroll 1 n'est pas terminé, ils ne sont pas pris en compte et même quand le scroll 1 est terminé, il ne fait pas les scroll 2 3 4... que l'on a fait pendant la rotation.

Je ne sais pas si c'est clair.

Invité · 26/08/2019, 11h40

Oui, c'est clair.

Dans le site cité, on trouve le fichier jquery.mousewheel.min.js (github),
ainsi que :

Code HTML :

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

1
2
3
4
5
6
7
<div class="section-scroll">
<a href="#process" class="link-section">
<div class="mouse">
<div class="wheel"></div>
</div>
</a>
</div>

Mais je ne sais pas quoi en conclure...

**taka10** · 26/08/2019, 13h03

Je vais essayer de creuser encore...

Merci d'y avoir jeté un oeil

Invité · 26/08/2019, 14h13

Une solution qui semble "faire la farce" :

Code html :

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

1
2
	<input type="hidden" name="lot_ec" id="lot_ec" value="1" data-delai="1">
(ajout de data-delai="1")

Code JavaScript :

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$(document).ready(function(){
	$('#appartement .soleil').on('wheel', function(e){
		e.originalEvent.preventDefault(); // évite le comportement par défaut (scroll de la page)
 
		var val = $('#lot_ec').val();
		var val_a = val;
		var delai = $('#lot_ec').data('delai');
 
		if( delai != 1 )
		{
			window.setTimeout(function(){
			$('#lot_ec').data('delai',1);
			}, 500);	// délai entre 2 tours de molette (A ADAPTER : entre 500 et 1000 ?)
		} else {
			$('#lot_ec').data('delai',0);
 
			if( e.originalEvent.deltaY < 0) {
				val=parseInt(val)-1;
				if(val==0) val=18;
				$('#lot_ec').val(val);
			}else{
				val=parseInt(val)+1;
				if(val==19) val=1;
				$('#lot_ec').val(val);
			}
 
			// (suite du script
			// ...........
 
			// ...........
		} // fin du if
    });
});

N.B. J'ai mis '#appartement .soleil' pour cibler seulement la zone du "soleil".
Ce qui permet de scroller la page EN DEHORS de ce "soleil".

**taka10** · 26/08/2019, 14h50

Bon j'ai fait plusieurs tests.

Déjà c'est très bien pour le déblocage quand on arrive à 18 et 1, on peut tourner indéfiniment c'est nickel.

le

Code :

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

e.originalEvent.preventDefault();

provoque un bug sur safari que je n'ai pas normalement (pour rappel, ça fonctionne très bien sur safari), c'est à dire que l'on tourne sur la roue très vite, en gros comme sur chrome et firefox.

J"ai mis wheel en place mais ça ne change rien. J'ai utilisé le script jquery.mousewheel.min.js mais toujours pareil, en fait sur firefox ou chrome, même si on fait un seul scroll, il passe plusieurs fois dans le

Code :

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

$('section').on('wheel', function(e) {

selon que le scroll est long ou pas.

Invité · 26/08/2019, 15h01

1- A priori, il suffit du "classique" (et surtout compatible !) :

Code :

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

		e.preventDefault(); // évite le comportement par défaut (scroll de la page)

(je ne sais plus trop où j'avais trouvé l'autre syntaxe)

2- Quand au fait qu'il passe plusieurs fois quand le scroll est long, c'est normal...
Je n'ai pas dit que ma solution était LA solution.

Code :

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

1
2
3
			window.setTimeout(function(){
			$('#lot_ec').data('delai',1);
			}, 500);	// délai entre 2 tours de molette (500 millisecondes : A ADAPTER)

**taka10** · 26/08/2019, 15h35

1- C'est pareil mais à la limite, ce n'est pas le soucis pour l'instant

2- Je n'avais pas vu la solution proposée, je viens de la mettre en place , ce n'est pas top top, ça va toujours trop vite, je ne vois pas comment ils ont fait sur https://waaark.com/

**taka10** · 26/08/2019, 16h30

Est ce que la solution ne serait pas de ne pas utiliser le mouse wheel ??? Mais tout simplement un on scroll.

Comment pourrait on faire pour dire : - je scrolle vers le bas, si jamais je scrolle à nouveau pendant les 2 secondes (limite à fixer) qui suivent (bas ou haut), j'annule le scroll (c'est-à-dire que même après les 2 secondes, on n'exécute pas les scrolls qui ont été fait pendant les 2 secondes). Par contre, si à 2,5 secondes, je refait un scroll, là c'est pris en compte.

Est ce clair ? J'y réfléchi mais pour l'instant , je ne sais pas trop si c'est possible de faire cela.