-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathtest_with_scrollable_elm.html
98 lines (84 loc) · 2.55 KB
/
test_with_scrollable_elm.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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10; IE=9; IE=8;" />
<meta name="robots" content="index,follow" />
<title>Test with scrollable element</title>
<script type="text/javascript" src="js/touchr.js"></script>
<!-- Modernizr.touch should be true -->
<!-- script type="text/javascript" src="http://modernizr.com/downloads/modernizr-latest.js"></script-->
<style type="text/css">
html {
overflow: hidden;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
-ms-touch-action: none;
touch-action: none;
position: absolute;
}
/* Log window */
#log {
position: absolute;
overflow: auto;
width: 400px;
height: 100%;
left: 0;
font-family: Consolas;
font-size: 12px;
}
#clear {
position:absolute;
left: 400px;
}
#logHead {
font-weight: bold;
}
#logContent {
white-space: pre;
}
</style>
</head>
<body id="body">
<div id="x" style="width: 200px; height: 200px; overflow-y: scroll;">
<div id="in" style="height: 1000px"></div>
</div>
<div id="log">
<div id="logHead">type, touches#, changed#, [0]screenX/Y, [1]screenX/Y</div>
<div id="logContent"></div>
</div>
<button id="clear" onclick="document.getElementById('logContent').innerText='';">Clear</button>
<script type="text/javascript">
//logging
var logdiv = document.getElementById("logContent");
function log() {
var txt = document.createTextNode(Array.prototype.join.call(arguments, ", ") + "\r\n");
logdiv.insertBefore(txt, logdiv.firstChild);
}
function listener(e) {
var len = e.touches ? e.touches.length : 0;
log(
e.type,
len ? len : 0,
e.changedTouches ? e.changedTouches.length : "-",
e.target.nodeName+"#"+e.target.id,
len > 0 ? e.touches[0].screenX : "-",
len > 0 ? e.touches[0].screenY : "-",
len > 1 ? e.touches[1].screenX : "-",
len > 1 ? e.touches[1].screenY : "-"
);
}
// Triggering the events for this element
var elm = document.body;
elm.addEventListener("touchstart", listener, false);
elm.addEventListener("touchmove", listener, false);
elm.addEventListener("touchend", listener, false);
elm.addEventListener("gesturestart", listener, false);
elm.addEventListener("gesturechange", listener, false);
elm.addEventListener("gestureend", listener, false);
</script>
</body>
</html>