-
Notifications
You must be signed in to change notification settings - Fork 44
/
Copy pathtouchevent-scroll.html
73 lines (73 loc) · 1.71 KB
/
touchevent-scroll.html
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
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="width=device-width">
<title>Touch events while scrolling demo page</title>
<style>
body, html {
height: 100%;
width: 100%;
margin: 0;
}
#spacer {
height: 300px;
}
#scroller {
position: absolute;
overflow: scroll;
top: 5px;
left: 5px;
right: 5px;
height: 200px;
}
#log {
position: absolute;
border: 1px solid black;
overflow: scroll;
font-size: small;
top: 210px;
left: 5px;
right: 5px;
bottom: 5px;
}
</style>
</head>
<body>
<div id=scroller>
Scroll me <div id=spacer></div>
Scroll me <div id=spacer></div>
Scroll me <div id=spacer></div>
Scroll me <div id=spacer></div>
Scroll me <div id=spacer></div>
Scroll me <div id=spacer></div>
Scroll me <div id=spacer></div>
</div>
<div id=log>
</div>
<script>
function log(msg) {
document.getElementById('log').innerHTML += msg + '<br/>';
}
var lastTime = undefined;
function handler(event) {
if ((event.type == 'touchstart' && event.touches.length == event.changedTouches.length) ||
(event.type == 'pointerdown' && event.isPrimary)) {
document.getElementById('log').innerHTML = '';
lastTime = undefined;
}
var msg = event.type + ' cancelable=' + event.cancelable +
' scrollTop=' + document.getElementById('scroller').scrollTop;
if (lastTime)
msg += ' ' + (event.timeStamp - lastTime) + 'ms';
log(msg);
lastTime = event.timeStamp;
}
var events = ['touchstart', 'touchmove', 'touchend', 'touchcancel',
'pointerdown', 'pointermove', 'pointerup', 'pointerenter', 'pointerleave', 'pointercancel',
'click' ];
events.forEach(function(name) {
document.getElementById('scroller').addEventListener(name, handler);
});
</script>
</body>
</html>