Scroll tactile en Javascript ?

Version imprimable

04/07/2011, 11h45
Invité

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.
04/07/2011, 11h53
SpaceFrog

au moyen du drag drop ...
04/07/2011, 12h13
javatwister

ah d'accord, je suis rassuré... je croyais que tu voulais scroller l'écran avec ton doigt;
04/07/2011, 12h34
Invité

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. :mouarf:
04/07/2011, 13h03
SpaceFrog

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

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:

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>

05/07/2011, 16h33
Invité

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.
05/07/2011, 16h38
SpaceFrog

http://stackoverflow.com/questions/4...easing-inertia
06/07/2011, 15h18
Invité

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.