/
demo.html
250 lines (246 loc) · 20.1 KB
/
demo.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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery.overscroll</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#overscroll { width: 500px; height: 500px; overflow: hidden; border: solid 1px #000; margin: 30px auto; position: relative; }
#overscroll ul { width: 2500px; margin:0; padding: 0; }
#overscroll li { display: block; float: left; width: 100px; height: 100px; background-color: #FFF; }
#overscroll li.alt { background-color: #C00; }
#overscroll li.no-drag { background-color: #000; color: #FFF; }
#overscroll li.last { clear: both; visibility: hidden; height: 0; padding: 0; }
</style>
</head>
<body>
<h1>jQuery.overscroll</h1>
<div id="overscroll">
<ul>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li><a id="link" href="javascript:void(0)">Click Me!</a></li><li class="no-drag">Can't drag me!</li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li class="last"></li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.overscroll.js"></script>
<script>
$(function(o){
o = $("#overscroll").overscroll({
cancelOn: '.no-drag',
//hoverThumbs: true,
//persistThumbs: true,
//showThumbs: false,
scrollLeft: 200,
scrollTop: 100
}).on('overscroll:dragstart overscroll:dragend overscroll:driftstart overscroll:driftend', function(event){
console.log(event.type);
});
$("#link").click(function(){
if(!o.data("dragging")) {
console.log("clicked!");
} else {
return false;
}
});
});
</script>
</body>
</html>