Scroll complet à la souris

**Tychoblood** · 16/01/2012, 06h33

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

**NoSmoking** · 16/01/2012, 22h43

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

**Bovino** · 17/01/2012, 08h07

Ceci dit, je trouve ça particulièrement désagréable comme ergonomie...

**SpaceFrog** · 17/01/2012, 08h42

totalement pas navigable

C'est de l'anti ergonomie pure, fait avoir du temps à perdre

**Tychoblood** · 17/01/2012, 09h12

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 :

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

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

**Bovino** · 17/01/2012, 09h57

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 !

**SpaceFrog** · 17/01/2012, 10h16

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/

**Tychoblood** · 17/01/2012, 10h33

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.

Invité · 17/01/2012, 15h16

bonjour

tu peut toujour essayer ca

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
<!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>

**SpaceFrog** · 17/01/2012, 15h32

not IE compatible ...

**Bovino** · 17/01/2012, 15h37

Oui, il faut adapter cette ligne

Code :

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

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

Invité · 17/01/2012, 15h44

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 :

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
<!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>

**SpaceFrog** · 17/01/2012, 15h47

toujours pas pour IE8

Invité · 17/01/2012, 18h45

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 ??

**NoSmoking** · 17/01/2012, 22h13

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.

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/.

**Darkyl** · 19/01/2012, 09h24

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

**NoSmoking** · 19/01/2012, 23h14

pas compris ta requête !

**Darkyl** · 20/01/2012, 09h05

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

**SpaceFrog** · 20/01/2012, 09h26

ben a partir du moment ou c'est un conteneur qui se déplace ...
Je vois pas ou est le souci

**Darkyl** · 20/01/2012, 09h33

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)

Scroll complet à la souris

JavaScript

Discussions similaires

Partager

Partager