Scroll tactile en Javascript ?

kéraunos · 04/07/2011, 11h45

Bonjour à tous.

Est-ce possible en Javascript de mettre au point une sorte de scroll tactile sur une page web ?

Je m'explique : vous voyez sûrement la manière dont on fait défiler verticalement une page sur un iPhone ou un iPad. Est-il possible de créer le même genre de comportement avec le pointeur de la souris sur un navigateur desktop ?

Typiquement, détecter lorsque le clic gauche est suffisamment long (délai à fixer arbitrairement) puis faire défiler la page verticalement en fonction des mouvements du pointeur, tant que le clic est maintenu. Le point de la page situé sous le pointeur au moment du clic suit le pointeur. Quand le bouton de la souris est relâché, le scroll s'arrête.

Merci.

SpaceFrog · 04/07/2011, 11h53

au moyen du drag drop ...

javatwister · 04/07/2011, 12h13

ah d'accord, je suis rassuré... je croyais que tu voulais scroller l'écran avec ton doigt;

kéraunos · 04/07/2011, 12h34

Ok merci SpaceFrog.

Je commencerai à lire ce tuto : est-il possible de drag-n-dropper tout le body d'une page HTML avec ce genre de méthodes ?

Si vous avez plus de recul que moi sur la question (ce qui ne doit pas être dur), merci de me dire si ce tuto pourra me mener à la solution.

Ou s'il existe plus simple.

Edit : non Javatwister, je tiens à la propreté de mon écran.

SpaceFrog · 04/07/2011, 13h03

il me semble qu'il y a des plugins jquery qui permette ça avec en prime le easing pour l'inertie

kéraunos · 04/07/2011, 22h33

Okay, voici mon code, fonctionnel sous Firefox 5, Safari 5, Chrome et Opera 11:

Pas d'inertie, mais système de scroll "tactile" comme sur les appareils mobiles.

[Requiert jQuery]

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
 
<!DOCTYPE html>
 
<html>
<head>
	<title>Test Scroll Tactile</title>
	<script type="text/javascript" src="jquery.min.js"></script>
	<style type="text/css">
		#content {
			margin: 0px auto;
			width: 400px;
			height: 2000px;
			background: #adf;
		}
		#pos {
			position: fixed;
			width: 400px;
			background: #ff0;
		}
	</style>
</head>
 
<body>
 
	<div id="content">
 
		<div>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dapibus tortor. In elit massa, fermentum vestibulum consectetur vel, posuere id nulla. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec fringilla, turpis a euismod suscipit, lectus nisl placerat dolor, id posuere mi tortor quis lacus. Nullam semper nisl et massa accumsan posuere. In fringilla mattis consequat. Curabitur et lacus nec nisl accumsan scelerisque nec in neque. Sed imperdiet pellentesque nisi a malesuada. Sed vel elementum magna. Phasellus vitae metus id diam ornare auctor nec nec ligula. Suspendisse potenti. Nulla facilisi. Vestibulum tellus magna, mollis non varius non, posuere sed elit. Duis ut fermentum enim. Nam semper risus eu est vulputate eget semper augue ultrices. Proin accumsan lacinia risus quis bibendum. Fusce eu eros sit amet ante facilisis egestas. Sed pharetra nibh eu turpis euismod vel pellentesque nulla gravida. 
		</div>
 
		<div id="pos">
			(browser window) y on mousedown =<br>
			scrollTop on mousedown =<br>
			(browser window) current y =
		</div>
 
	</div>
 
	<script type="text/javascript">
		var down = false,
			scrollTop = 0,
			y = 0;
 
		$('body').mousedown(function(e) {
			down = true;
			scrollTop = window.pageYOffset;
			y = e.clientY;
		}).mouseup(function() {
			down = false;
		}).mousemove(function(e) {
			if (down) {
				window.scrollTo(0, scrollTop + y - e.clientY );
				document.getElementById('pos').innerHTML = '(browser window) mousedown y = ' + y + '<br>' +
					'scrollTop on mousedown = ' + scrollTop + '<br>' +
					'(browser window) current y = ' + e.clientY;
			}
		}).mouseleave(function() {
			down = false;
		});
 
	</script>
 
</body>
</html>

kéraunos · 05/07/2011, 16h33

Je rouvre le sujet parce que je n'arrive pas à trouver les bons outils jQuery pour réaliser une inertie lorsque l'internaute relâche le bouton de la souris (cf. mon code ci-dessus). J'ai pris connaissance du plug-in Easing de jQuery mais je ne vois pas comment m'y prendre vu que j'aurais besoin, par exemple, de récupérer la vitesse de défilement lors de l'événement "mouseup".

Est-ce possible avec jQuery, en s'économisant la réalisation d'un chronomètre et d'une fonction qui, par itérations, fasse décroître la vitesse de défilement de manière linéaire (ou quadratique, exponentielle... peu importe) ?

Merci.

SpaceFrog · 05/07/2011, 16h38

http://stackoverflow.com/questions/4...easing-inertia

kéraunos · 06/07/2011, 15h18

Je n'arrive pas à adapter leur code (qui porte sur une div) à mon problème de scrolling de toute la page. En fait, il faudrait "jQueryser" mon code (cf. ci-dessus).
Or je peine à trouver des équivalents en jQuery de l'attribut window.pageYOffset et de la méthode window.scrollTo(). Des idées ?

Merci.

04/07/2011, 11h45	#1
kéraunos Membre régulier Inscription : janvier 2005 Messages : 157 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : janvier 2005 Messages : 157 Points : 71 Points : 71	Scroll tactile en Javascript ? Bonjour à tous. Est-ce possible en Javascript de mettre au point une sorte de scroll tactile sur une page web ? Je m'explique : vous voyez sûrement la manière dont on fait défiler verticalement une page sur un iPhone ou un iPad. Est-il possible de créer le même genre de comportement avec le pointeur de la souris sur un navigateur desktop ? Typiquement, détecter lorsque le clic gauche est suffisamment long (délai à fixer arbitrairement) puis faire défiler la page verticalement en fonction des mouvements du pointeur, tant que le clic est maintenu. Le point de la page situé sous le pointeur au moment du clic suit le pointeur. Quand le bouton de la souris est relâché, le scroll s'arrête. Merci.
	00

04/07/2011, 11h53	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 019 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 019 Points : 45 114 Points : 45 114	au moyen du drag drop ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

04/07/2011, 13h03	#5
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 019 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 019 Points : 45 114 Points : 45 114	il me semble qu'il y a des plugins jquery qui permette ça avec en prime le easing pour l'inertie __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

05/07/2011, 16h38	#8
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 019 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 019 Points : 45 114 Points : 45 114	http://stackoverflow.com/questions/4...easing-inertia __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

04/07/2011, 12h13	#3
javatwister Expert Confirmé danseur Inscription : août 2003 Messages : 2 667 Détails du profil Informations personnelles : Sexe : Localisation : France, Calvados (Basse Normandie) Informations professionnelles : Activité : danseur Informations forums : Inscription : août 2003 Messages : 2 667 Points : 3 035 Points : 3 035	ah d'accord, je suis rassuré... je croyais que tu voulais scroller l'écran avec ton doigt;
	00

04/07/2011, 12h34	#4
kéraunos Membre régulier Inscription : janvier 2005 Messages : 157 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : janvier 2005 Messages : 157 Points : 71 Points : 71	Ok merci SpaceFrog. Je commencerai à lire ce tuto : est-il possible de drag-n-dropper tout le body d'une page HTML avec ce genre de méthodes ? Si vous avez plus de recul que moi sur la question (ce qui ne doit pas être dur), merci de me dire si ce tuto pourra me mener à la solution. Ou s'il existe plus simple. Edit : non Javatwister, je tiens à la propreté de mon écran.
	00

05/07/2011, 16h33	#7
kéraunos Membre régulier Inscription : janvier 2005 Messages : 157 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : janvier 2005 Messages : 157 Points : 71 Points : 71	Je rouvre le sujet parce que je n'arrive pas à trouver les bons outils jQuery pour réaliser une inertie lorsque l'internaute relâche le bouton de la souris (cf. mon code ci-dessus). J'ai pris connaissance du plug-in Easing de jQuery mais je ne vois pas comment m'y prendre vu que j'aurais besoin, par exemple, de récupérer la vitesse de défilement lors de l'événement "mouseup". Est-ce possible avec jQuery, en s'économisant la réalisation d'un chronomètre et d'une fonction qui, par itérations, fasse décroître la vitesse de défilement de manière linéaire (ou quadratique, exponentielle... peu importe) ? Merci.
	00

06/07/2011, 15h18	#9
kéraunos Membre régulier Inscription : janvier 2005 Messages : 157 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : janvier 2005 Messages : 157 Points : 71 Points : 71	Je n'arrive pas à adapter leur code (qui porte sur une div) à mon problème de scrolling de toute la page. En fait, il faudrait "jQueryser" mon code (cf. ci-dessus). Or je peine à trouver des équivalents en jQuery de l'attribut window.pageYOffset et de la méthode window.scrollTo(). Des idées ? Merci.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email