Scroll complet à la souris

Version imprimable

16/01/2012, 06h33
Tychoblood

Scroll complet à la souris

Bonjour tout le monde, et tout d'abord bonne année !

Alors voilà mon problème, je chercherais un plugin de scroll à la souris : je vous donne un site comme exemple : http://fromtheroughmovie.com/#!/desk/dispatch/

J'ai cherché différents plugins, pour essayer d'avoir le même résultat
( http://scripterlative.com/files/cursorpagescroll.htm par exemple ), mais impossible (lag lors du déplacement de la souris, scroll qui ne s'effectue qu'avec le curseur au bord de la fenêtre...

De même j'ai essayé de décrypter le JS du 1er site, mais plus de 800ko (!!) de JS, c'est assez costaud, et même si j'ai déniché quelques pistes, j'aimerais avoir votre aide.

Voilà si quelqu'un à déja eu à faire ce genre de plugin, ou me mettrait sur la voie (2 jours de recherche assez intensive).
Je dois avouer qu'au niveau JS et math, ce n'est pas trop mon truc.

Merci d'avance
16/01/2012, 22h43
NoSmoking

Bonsoir,
le principe est simple
- récupération de la position de la mouse
- suivant la position de celle ci scroll du document

bien sûr il peut y avoir plus ou moins sophistiqué comme déplacement
17/01/2012, 08h07
Bovino

Ceci dit, je trouve ça particulièrement désagréable comme ergonomie...
17/01/2012, 08h42
SpaceFrog

totalement pas navigable 8O
C'est de l'anti ergonomie pure, fait avoir du temps à perdre :mrgreen:
17/01/2012, 09h12
Tychoblood
J'avoue que c'est un système assez spécial, mais c'est pour une navigation sur une carte de 4000px de large, avec système de scrollTo() sur liens et autres.
Si le client demande, on n'a malheureusement pas tout le temps la possibilité de l faire revenir à la raison.
Il faut avouer quand même que ça change de style de navigation et puis si le sujet est à même d'être traité de cette façon, pourquoi pas.
Clairement je ne le ferais pas sur un site "normal" :)

@NoSmoking
Je dois avouer avoir testé ce principe, mais malheureusement le scroll s'effectue en partie, et non sur toute la page.
Code:

1 2 3 4 5 6 7 8 9 10 var coordY =e.clientY; var coordX= e.clientX; // var coordY =e.pageY; // var coordX= e.pageX; $.scrollTo( coordY, { axis:'y' }); $.scrollTo( coordX, { axis:'x' });
Avec le e.clientY ou X , ca scroll bien, mais juste sur la largeur de la fenetre client (normal quoi)

Logiquement avec le e.pageY ou X, j'aurais tendance à penser avoir le même résultat,mais sur la page entière, malheureusement non : je me retrouve bloqué en bas à droite de l'écran.
J'imagine qu'il manque quelque chose mais quoi...
17/01/2012, 09h57
Bovino

Citation:

Si le client demande, on n'a malheureusement pas tout le temps la possibilité de l faire revenir à la raison.

Mouais... heureusement que les architectes n'ont pas les mêmes raisonnements, sinon, il y aurait un paquet de maisons bancales !
Sincèrement, le spécialiste, c'est toi ou le client ?
Il faut savoir lui expliquer que ce qu'il veut, c'est pas terrible !
A la rigueur un scroll à la souris mais contrôlé (lié à l'appui du bouton) passe encore, mais lié juste à la position de la souris, c'est à faire fuir tous tes visiteurs !
17/01/2012, 10h16
SpaceFrog

Mieux vaut un bon drag drop que cette egonomie là ...

Il y a d'ailleurs un bel exemple sur developpez
http://dmouronval.developpez.com/clipper/
avec les commentaires ici
http://www.developpez.net/forums/d10...e-google-maps/
17/01/2012, 10h33
Tychoblood

Oui bien sûr, en même temps, c'est pour une maquette pour l'instant, donc rien de définitif (j'avoue perso ne pas être fan de cette navigation), mais la marque voudrait quelque chose de différent (en bien ou en mal ça...).

En ce qui concerne les architectes, tu as raison, en même temps on n'a pas les mêmes contraintes de sécurité :).

Pour le scroll lié au mousedown, j'y ai pensé aussi, je le garde de côté.

En tout cas je continue à fouiner pour trouver une soluce digne de ce nom.

bonjour

tu peut toujour essayer ca

Code:

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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#desk-background-1{
width:2018px;
height:1666px;
position:relative;
top:20px;
left:0px;
}
 
#desk-background-2{
width:2018px;
height:1666px;
position:relative;
top:0px;
left:2018px;
margin-top:-1666px;
}
</style>
 
 
 
<script type="text/javascript">
 
 
var def={
 
oxo:0,
ixe:0,
igrec:0,
 
sensa:function(e){
 
var clic=document.getElementById('clic')
 
var omx=(clic.offsetLeft+(clic.offsetWidth/2))-def.ixe;
if(omx>100 || omx<-100){									//zone morte
clic.scrollLeft=clic.scrollLeft-Math.round(omx/20);			//vitesse augmenter la division pour diminuer la vitesse
}
var omy=(clic.offsetTop+(clic.offsetHeight/2))-def.igrec;
if(omy>100 || omy<-100){									//zone morte
clic.scrollTop=clic.scrollTop-Math.round(omy/20);			//vitesse augmenter la division pour diminuer la vitesse
}
},
 
souris:function(e){
 
def.ixe=e.clientX;
def.igrec=e.clientY;
}
}
 
function init(){
document.getElementById('clic').addEventListener("mousemove", def.souris, false);
document.getElementById('clic').style.height=screen.height+'px'
def.oxo=setInterval(def.sensa,30)
}
onload=init
 
 
</script>
</head>
<div  id='clic' style='overflow:hidden;width:100%'>
<div>
<img src='http://fromtheroughmovie.com/uploads/desk/background-1.jpg' id='desk-background-1'>
<img src='http://fromtheroughmovie.com/uploads/desk/background-2.jpg' id='desk-background-2'>
</div>
</div>
</body>
</html>

17/01/2012, 15h32
SpaceFrog

not IE compatible ...
17/01/2012, 15h37
Bovino

Oui, il faut adapter cette ligne

Code:

document.getElementById('clic').addEventListener("mousemove", def.souris, false);

;)

ces temps ci j'ai tendance a oublié les versions de ie < 9

compatible ie c'est pas super fluide mais en meme temp c'est ie < 9

Code:

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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#desk-background-1{
width:2018px;
height:1666px;
position:relative;
top:20px;
left:0px;
}
 
#desk-background-2{
width:2018px;
height:1666px;
position:relative;
top:0px;
left:2018px;
margin-top:-1666px;
}
</style>
 
 
 
<script type="text/javascript">
 
 
var def={
 
oxo:0,
ixe:0,
igrec:0,
 
sensa:function(e){
 
var clic=document.getElementById('clic')
 
var omx=(clic.offsetLeft+(clic.offsetWidth/2))-def.ixe;
if(omx>100 || omx<-100){									//zone morte
clic.scrollLeft=clic.scrollLeft-Math.round(omx/20);			//vitesse augmenter la division pour diminuer la vitesse
}
var omy=(clic.offsetTop+(clic.offsetHeight/2))-def.igrec;
if(omy>100 || omy<-100){									//zone morte
clic.scrollTop=clic.scrollTop-Math.round(omy/20);			//vitesse augmenter la division pour diminuer la vitesse
}
},
 
souris:function(e){
 
e =(!e) ? window.event : e;
def.ixe=e.clientX;
def.igrec=e.clientY;
}
}
 
function init(){
 
var clic=document.getElementById('clic')
 
if(parseInt(navigator.userAgent.substring(30,31))<=8){
clic.attachEvent("onmousemove",def.souris);
}
else{
clic.addEventListener("mousemove", def.souris, false);
}
 
clic.style.height=document.documentElement.clientHeight+'px'
def.oxo=setInterval(def.sensa,30)
}
onload=init
 
 
</script>
</head>
<div  id='clic' style='overflow:hidden;width:100%'>
<div>
<img src='http://fromtheroughmovie.com/uploads/desk/background-1.jpg' id='desk-background-1'>
<img src='http://fromtheroughmovie.com/uploads/desk/background-2.jpg' id='desk-background-2'>
</div>
</div>
</body>
</html>

17/01/2012, 15h47
SpaceFrog

toujours pas pour IE8
17/01/2012, 18h45
Invité

je vient de faire un copié coller de l'ensemble au cas ou il y avait une erreur mais il n'y en a pas et chez moi ca fonctionne avec ie 8 ??
17/01/2012, 22h13
NoSmoking

Citation:

Envoyé par mekal

je vient de faire un copié coller de l'ensemble au cas ou il y avait une erreur mais il n'y en a pas et chez moi ca fonctionne avec ie 8 ??

je rajouterais cela marche sous IE7.

Citation:

J'avoue que c'est un système assez spécial, mais c'est pour une navigation sur une carte de 4000px de large, avec système de scrollTo() sur liens et autres.

Ergonomiquement parlant je rejoins SpaceFrog en ce qui concerne http://dmouronval.developpez.com/clipper/.
19/01/2012, 09h24
Darkyl

Bonjour

heu juste une question comme ça :

Ce script :"http://dmouronval.developpez.com/clipper/", est-ce qu'il marche si il y a des objets sur la page qui bouge (la grande image) ?
J'avais essayé de faire une map style google mais des que je restais cliqué et que je bougeais , cela me sélectionnait les objets...
19/01/2012, 23h14
NoSmoking

:koi: pas compris ta requête !
20/01/2012, 09h05
Darkyl

bonjour,

désolé, je vais essayer de mieux m'exprimer.

J'avais fait un script qui affiche une page (avec image de fond et d'autres objets par dessus, tels que des images, des divs ...) bien plus grande que la frame qui l'affiche.

Je voulais faire comme google map : que l'on puisse déplacer la page (en déplacant les scroll de la frame) en restant cliquer sur la page et en bougeant la souris.

J'ai donc fait une fonction qui me reconnait les clicks long, des clicks courts et lorsqu'un click long était reconnu, je voulais déplacer les scroll en fonction du déplacement de la souris (quand on maintient le click long en bougeant).

Mais voilà, dés que je bougeais en restant cliqué, les évènements souris n'étaient plus reconnus et cela me sélectionnait les éléments de la page... Même l'arrêt du click n'était plus reconnu...

J'avais déjà posté pour savoir comment empécher cela mais n'avait pas trouvé.
20/01/2012, 09h26
SpaceFrog

ben a partir du moment ou c'est un conteneur qui se déplace ...
Je vois pas ou est le souci
20/01/2012, 09h33
Darkyl

ok, donc je vais essayer d'adapter le script car celui présenté ne prend pas en compte le click long, ni le click court et n'affiche aucun élément dans le conteneur, juste une image de fond.

J'ai bien peur de retomber dans le même problème quand je mettrais mon click long (onclick avec setinterval qui vérifie que le click est toujours enfoncé, puis au bout de x interval passe en mode click long, me change le curseur et doit déplacer la page si je déplace la souris).

Merci de ta réponse.

(Peut-être que quand le click long est détecté, je dois mettre tous les objets de ma page en selected=enabled ou un truc du genre pour pas qu'ils soient sélectionnable)
20/01/2012, 09h39
SpaceFrog

HA après pour la gestion entre le deplacement du conteneur et le deplacement des objets à l'intérieur va falloir ruser pour gérer
... pourquoi pas faire une combinaison de touches
genre shift + mousedown poru deplacer un objet contenu et juste mousedown pour deplacer le map ?