Discussion :

[gitney]

Bonjour à tous,
Je débute en Javascript et je souhaiterai effectuer un déplacement du navigateur (sur un site ayant un largeur de 6000px) en fonction du passage de la souris sur les bords du navigateur. J'arrive à réaliser l' objectif principal mais il y a encore de nombreux défauts...
Notamment celui d'annuler le scrolling si le curseur sort de la zone permettant de scroller;
J'ai fais un code qui ressemble à ceci:

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
var a = 0;
$('html,body').on('mousemove',function(e){
	if(e.clientX>1300){
		if(a<4000){
			a+=10;
			$('body,html').animate({
				scrollLeft:a			
			},100,'linear');
			$('#special').html(a);
		}
	}
	if(e.clientX<200){
		if(a>0){
			a-=10;
			$('body,html').animate({
				scrollLeft:a			
			},100,'linear')		
			$('#special').html(a);
		}
	}
});

Comme je débute, j'aimerai savoir si je fais fausse route ou pas, car je pensais brièvement au responsive design et je me dis que ça va être compliquer avec mon clientX...
De plus, j'ai lu sur certains forums, qu'il valait mieux modifier le css plutôt que le scrollLeft. Qu'en pensez vous?
Merci d'avance pour vos conseils.

[SpaceFrog]

j'aurais fonctionné en % pour la position de la souris...

[gitney]

Oui merci.
Du coup j'ai fait comme ceci:

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
$(function() {
	window.onload = function() {	
		var a = 0;
		var $LargeurFenetre = $(window).width();
 
		$('html,body').on('mousemove',function(e){
			var $positionCurseur = e.clientX/$LargeurFenetre*100;
			if($positionCurseur>80){
				if(a<4000){
					a+=10;
						$('body,html').animate({
							scrollLeft:a			
						},100,'linear');					
				}
			}
 
			if($positionCurseur>20 && $positionCurseur<80){
 
				$(window).on('scroll',function(e){
					e.preventDefault();
				});
			}
 
			if($positionCurseur<20){
				if(a>0){
					a-=10;	
					$('body,html').animate({
						scrollLeft:a					
					},100,'linear')				
				}
			}
 
		});
	}
 
});

Mais je ne comprend pas pourquoi je n'arrive pas à interrompre le scroll avec mon e.preventDefault() de la ligne 20...
Une piste?

[gitney]

Ah oui je suis étourdi,
il fallait mettre le preventDefault dans un animate plutôt qu'un évènement scroll...