Scroll tactile en Javascript ?

Invit� · 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;

Invit� · 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

Invit� · 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>

Invit� · 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

Invit� · 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.

Scroll tactile en Javascript ?

JavaScript

Discussions similaires

Partager

Partager