Skip to content

Instantly share code, notes, and snippets.

@stepheneb

stepheneb/plabel-scroll-test.html

Last active April 6, 2023 20:36
Show Gist options
  • Save stepheneb/e65ebfaf90fd129990cc36ed08e4777e to your computer and use it in GitHub Desktop.
Save stepheneb/e65ebfaf90fd129990cc36ed08e4777e to your computer and use it in GitHub Desktop.
Download ZIP
horizontal scroll test of 650 items -- can't scroll leftr past item 328
Raw
plabel-scroll-test.html
<!DOCTYPE html>
<html>
<head>
<title>plabel scroll test</title>
<style>
:root {
--poslabel-color: #888;
--poslabel-border-color: #ddd;
--poslabel-background-color: rgba(250, 250, 250, 0.8);
--poslabel-center-color: #444;
--poslabel-center-border-color: #888;
--poslabel-center-background-color: rgba(187, 243, 243, 0.6);
}
.content {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
margin: 3rem 6rem;
}
.controls {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
margin: 1rem 1rem;
gap: 1rem;
}
.scroller {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: end;
width: 30rem;
font-size: 0.85rem;
padding: 0.25rem 0;
border: solid 1px darkgray;
overflow-x: scroll;
scroll-snap-type: x mandatory;
gap: 1rem;
}
.plabel {
scroll-snap-align: center;
height: 1.2rem;
padding: 4px 2px 0px 2px;
font-size: 95%;
color: var(--poslabel-color);
background-color: var(--poslabel-background-color);
border: 1px solid var(--poslabel-border-color);
border-radius: 4px;
}
.plabel.center {
color: var(--poslabel-center-color);
background-color: var(--poslabel-center-background-color);
border-color: var(--poslabel-center-border-color);
}
.plabel.empty {
visibility: hidden;
}
</style>
</head>
<body>
<a href="https://gistpreview.github.io/?e65ebfaf90fd129990cc36ed08e4777e">gistpreview.github.io/?e65ebfaf90fd129990cc36ed08e4777e</a>
<div class="content">
<div class="controls">
<div>Scroll to:</div>
<button id="scroll-to-start">start (0)</button>
<button id="scroll-to-middle">close to middle (330)</button>
<button id="scroll-to-end">end (649)</button>
</div>
<div id="position-detail-scroller" class="scroller">
<div class="plabel empty"></div>
<div class="plabel empty"></div>
<div class="plabel empty"></div>
<div class="plabel empty"></div>
<div class="plabel empty"></div>
<div class="plabel empty"></div>
<div class="plabel empty"></div>
<div class="plabel empty"></div>
<div class="plabel empty"></div>
<div class="plabel empty"></div>
<div id="0" class="plabel">
0
</div>
<div id="1" class="plabel">
1
</div>
<div id="2" class="plabel">
2
</div>
<div id="3" class="plabel">
3
</div>
<div id="4" class="plabel">
4
</div>
<div id="5" class="plabel">
5
</div>
<div id="6" class="plabel">
6
</div>
<div id="7" class="plabel">
7
</div>
<div id="8" class="plabel">
8
</div>
<div id="9" class="plabel">
9
</div>
<div id="10" class="plabel">
10
</div>
<div id="11" class="plabel">
11
</div>
<div id="12" class="plabel">
12
</div>
<div id="13" class="plabel">
13
</div>
<div id="14" class="plabel">
14
</div>
<div id="15" class="plabel">
15
</div>
<div id="16" class="plabel">
16
</div>
<div id="17" class="plabel">
17
</div>
<div id="18" class="plabel">
18
</div>
<div id="19" class="plabel">
19
</div>
<div id="20" class="plabel">
20
</div>
<div id="21" class="plabel">
21
</div>
<div id="22" class="plabel">
22
</div>
<div id="23" class="plabel">
23
</div>
<div id="24" class="plabel">
24
</div>
<div id="25" class="plabel">
25
</div>
<div id="26" class="plabel">
26
</div>
<div id="27" class="plabel">
27
</div>
<div id="28" class="plabel">
28
</div>
<div id="29" class="plabel">
29
</div>
<div id="30" class="plabel">
30
</div>
<div id="31" class="plabel">
31
</div>
<div id="32" class="plabel">
32
</div>
<div id="33" class="plabel">
33
</div>
<div id="34" class="plabel">
34
</div>
<div id="35" class="plabel">
35
</div>
<div id="36" class="plabel">
36
</div>
<div id="37" class="plabel">
37
</div>
<div id="38" class="plabel">
38
</div>
<div id="39" class="plabel">
39
</div>
<div id="40" class="plabel">
40
</div>
<div id="41" class="plabel">
41
</div>
<div id="42" class="plabel">
42
</div>
<div id="43" class="plabel">
43
</div>
<div id="44" class="plabel">
44
</div>
<div id="45" class="plabel">
45
</div>
<div id="46" class="plabel">
46
</div>
<div id="47" class="plabel">
47
</div>
<div id="48" class="plabel">
48
</div>
<div id="49" class="plabel">
49
</div>
<div id="50" class="plabel">
50
</div>
<div id="51" class="plabel">
51
</div>
<div id="52" class="plabel">
52
</div>
<div id="53" class="plabel">
53
</div>
<div id="54" class="plabel">
54
</div>
<div id="55" class="plabel">
55
</div>
<div id="56" class="plabel">
56
</div>
<div id="57" class="plabel">
57
</div>
<div id="58" class="plabel">
58
</div>
<div id="59" class="plabel">
59
</div>
<div id="60" class="plabel">
60
</div>
<div id="61" class="plabel">
61
</div>
<div id="62" class="plabel">
62
</div>
<div id="63" class="plabel">
63
</div>
<div id="64" class="plabel">
64
</div>
<div id="65" class="plabel">
65
</div>
<div id="66" class="plabel">
66
</div>
<div id="67" class="plabel">
67
</div>
<div id="68" class="plabel">
68
</div>
<div id="69" class="plabel">
69
</div>
<div id="70" class="plabel">
70
</div>
<div id="71" class="plabel">
71
</div>
<div id="72" class="plabel">
72
</div>
<div id="73" class="plabel">
73
</div>
<div id="74" class="plabel">
74
</div>
<div id="75" class="plabel">
75
</div>
<div id="76" class="plabel">
76
</div>
<div id="77" class="plabel">
77
</div>
<div id="78" class="plabel">
78
</div>
<div id="79" class="plabel">
79
</div>
<div id="80" class="plabel">
80
</div>
<div id="81" class="plabel">
81
</div>
<div id="82" class="plabel">
82
</div>
<div id="83" class="plabel">
83
</div>
<div id="84" class="plabel">
84
</div>
<div id="85" class="plabel">
85
</div>
<div id="86" class="plabel">
86
</div>
<div id="87" class="plabel">
87
</div>
<div id="88" class="plabel">
88
</div>
<div id="89" class="plabel">
89
</div>
<div id="90" class="plabel">
90
</div>
<div id="91" class="plabel">
91
</div>
<div id="92" class="plabel">
92
</div>
<div id="93" class="plabel">
93
</div>
<div id="94" class="plabel">
94
</div>
<div id="95" class="plabel">
95
</div>
<div id="96" class="plabel">
96
</div>
<div id="97" class="plabel">
97
</div>
<div id="98" class="plabel">
98
</div>
<div id="99" class="plabel">
99
</div>
<div id="100" class="plabel">
100
</div>
<div id="101" class="plabel">
101
</div>
<div id="102" class="plabel">
102
</div>
<div id="103" class="plabel">
103
</div>
<div id="104" class="plabel">
104
</div>
<div id="105" class="plabel">
105
</div>
<div id="106" class="plabel">
106
</div>
<div id="107" class="plabel">
107
</div>
<div id="108" class="plabel">
108
</div>
<div id="109" class="plabel">
109
</div>
<div id="110" class="plabel">
110
</div>
<div id="111" class="plabel">
111
</div>
<div id="112" class="plabel">
112
</div>
<div id="113" class="plabel">
113
</div>
<div id="114" class="plabel">
114
</div>
<div id="115" class="plabel">
115
</div>
<div id="116" class="plabel">
116
</div>
<div id="117" class="plabel">
117
</div>
<div id="118" class="plabel">
118
</div>
<div id="119" class="plabel">
119
</div>
<div id="120" class="plabel">
120
</div>
<div id="121" class="plabel">
121
</div>
<div id="122" class="plabel">
122
</div>
<div id="123" class="plabel">
123
</div>
<div id="124" class="plabel">
124
</div>
<div id="125" class="plabel">
125
</div>
<div id="126" class="plabel">
126
</div>
<div id="127" class="plabel">
127
</div>
<div id="128" class="plabel">
128
</div>
<div id="129" class="plabel">
129
</div>
<div id="130" class="plabel">
130
</div>
<div id="131" class="plabel">
131
</div>
<div id="132" class="plabel">
132
</div>
<div id="133" class="plabel">
133
</div>
<div id="134" class="plabel">
134
</div>
<div id="135" class="plabel">
135
</div>
<div id="136" class="plabel">
136
</div>
<div id="137" class="plabel">
137
</div>
<div id="138" class="plabel">
138
</div>
<div id="139" class="plabel">
139
</div>
<div id="140" class="plabel">
140
</div>
<div id="141" class="plabel">
141
</div>
<div id="142" class="plabel">
142
</div>
<div id="143" class="plabel">
143
</div>
<div id="144" class="plabel">
144
</div>
<div id="145" class="plabel">
145
</div>
<div id="146" class="plabel">
146
</div>
<div id="147" class="plabel">
147
</div>
<div id="148" class="plabel">
148
</div>
<div id="149" class="plabel">
149
</div>
<div id="150" class="plabel">
150
</div>
<div id="151" class="plabel">
151
</div>
<div id="152" class="plabel">
152
</div>
<div id="153" class="plabel">
153
</div>
<div id="154" class="plabel">
154
</div>
<div id="155" class="plabel">
155
</div>
<div id="156" class="plabel">
156
</div>
<div id="157" class="plabel">
157
</div>
<div id="158" class="plabel">
158
</div>
<div id="159" class="plabel">
159
</div>
<div id="160" class="plabel">
160
</div>
<div id="161" class="plabel">
161
</div>
<div id="162" class="plabel">
162
</div>
<div id="163" class="plabel">
163
</div>
<div id="164" class="plabel">
164
</div>
<div id="165" class="plabel">
165
</div>
<div id="166" class="plabel">
166
</div>
<div id="167" class="plabel">
167
</div>
<div id="168" class="plabel">
168
</div>
<div id="169" class="plabel">
169
</div>
<div id="170" class="plabel">
170
</div>
<div id="171" class="plabel">
171
</div>
<div id="172" class="plabel">
172
</div>
<div id="173" class="plabel">
173
</div>
<div id="174" class="plabel">
174
</div>
<div id="175" class="plabel">
175
</div>
<div id="176" class="plabel">
176
</div>
<div id="177" class="plabel">
177
</div>
<div id="178" class="plabel">
178
</div>
<div id="179" class="plabel">
179
</div>
<div id="180" class="plabel">
180
</div>
<div id="181" class="plabel">
181
</div>
<div id="182" class="plabel">
182
</div>
<div id="183" class="plabel">
183
</div>
<div id="184" class="plabel">
184
</div>
<div id="185" class="plabel">
185
</div>
<div id="186" class="plabel">
186
</div>
<div id="187" class="plabel">
187
</div>
<div id="188" class="plabel">
188
</div>
<div id="189" class="plabel">
189
</div>
<div id="190" class="plabel">
190
</div>
<div id="191" class="plabel">
191
</div>
<div id="192" class="plabel">
192
</div>
<div id="193" class="plabel">
193
</div>
<div id="194" class="plabel">
194
</div>
<div id="195" class="plabel">
195
</div>
<div id="196" class="plabel">
196
</div>
<div id="197" class="plabel">
197
</div>
<div id="198" class="plabel">
198
</div>
<div id="199" class="plabel">
199
</div>
<div id="200" class="plabel">
200
</div>
<div id="201" class="plabel">
201
</div>
<div id="202" class="plabel">
202
</div>
<div id="203" class="plabel">
203
</div>
<div id="204" class="plabel">
204
</div>
<div id="205" class="plabel">
205
</div>
<div id="206" class="plabel">
206
</div>
<div id="207" class="plabel">
207
</div>
<div id="208" class="plabel">
208
</div>
<div id="209" class="plabel">
209
</div>
<div id="210" class="plabel">
210
</div>
<div id="211" class="plabel">
211
</div>
<div id="212" class="plabel">
212
</div>
<div id="213" class="plabel">
213
</div>
<div id="214" class="plabel">
214
</div>
<div id="215" class="plabel">
215
</div>
<div id="216" class="plabel">
216
</div>
<div id="217" class="plabel">
217
</div>
<div id="218" class="plabel">
218
</div>
<div id="219" class="plabel">
219
</div>
<div id="220" class="plabel">
220
</div>
<div id="221" class="plabel">
221
</div>
<div id="222" class="plabel">
222
</div>
<div id="223" class="plabel">
223
</div>
<div id="224" class="plabel">
224
</div>
<div id="225" class="plabel">
225
</div>
<div id="226" class="plabel">
226
</div>
<div id="227" class="plabel">
227
</div>
<div id="228" class="plabel">
228
</div>
<div id="229" class="plabel">
229
</div>
<div id="230" class="plabel">
230
</div>
<div id="231" class="plabel">
231
</div>
<div id="232" class="plabel">
232
</div>
<div id="233" class="plabel">
233
</div>
<div id="234" class="plabel">
234
</div>
<div id="235" class="plabel">
235
</div>
<div id="236" class="plabel">
236
</div>
<div id="237" class="plabel">
237
</div>
<div id="238" class="plabel">
238
</div>
<div id="239" class="plabel">
239
</div>
<div id="240" class="plabel">
240
</div>
<div id="241" class="plabel">
241
</div>
<div id="242" class="plabel">
242
</div>
<div id="243" class="plabel">
243
</div>
<div id="244" class="plabel">
244
</div>
<div id="245" class="plabel">
245
</div>
<div id="246" class="plabel">
246
</div>
<div id="247" class="plabel">
247
</div>
<div id="248" class="plabel">
248
</div>
<div id="249" class="plabel">
249
</div>
<div id="250" class="plabel">
250
</div>
<div id="251" class="plabel">
251
</div>
<div id="252" class="plabel">
252
</div>
<div id="253" class="plabel">
253
</div>
<div id="254" class="plabel">
254
</div>
<div id="255" class="plabel">
255
</div>
<div id="256" class="plabel">
256
</div>
<div id="257" class="plabel">
257
</div>
<div id="258" class="plabel">
258
</div>
<div id="259" class="plabel">
259
</div>
<div id="260" class="plabel">
260
</div>
<div id="261" class="plabel">
261
</div>
<div id="262" class="plabel">
262
</div>
<div id="263" class="plabel">
263
</div>
<div id="264" class="plabel">
264
</div>
<div id="265" class="plabel">
265
</div>
<div id="266" class="plabel">
266
</div>
<div id="267" class="plabel">
267
</div>
<div id="268" class="plabel">
268
</div>
<div id="269" class="plabel">
269
</div>
<div id="270" class="plabel">
270
</div>
<div id="271" class="plabel">
271
</div>
<div id="272" class="plabel">
272
</div>
<div id="273" class="plabel">
273
</div>
<div id="274" class="plabel">
274
</div>
<div id="275" class="plabel">
275
</div>
<div id="276" class="plabel">
276
</div>
<div id="277" class="plabel">
277
</div>
<div id="278" class="plabel">
278
</div>
<div id="279" class="plabel">
279
</div>
<div id="280" class="plabel">
280
</div>
<div id="281" class="plabel">
281
</div>
<div id="282" class="plabel">
282
</div>
<div id="283" class="plabel">
283
</div>
<div id="284" class="plabel">
284
</div>
<div id="285" class="plabel">
285
</div>
<div id="286" class="plabel">
286
</div>
<div id="287" class="plabel">
287
</div>
<div id="288" class="plabel">
288
</div>
<div id="289" class="plabel">
289
</div>
<div id="290" class="plabel">
290
</div>
<div id="291" class="plabel">
291
</div>
<div id="292" class="plabel">
292
</div>
<div id="293" class="plabel">
293
</div>
<div id="294" class="plabel">
294
</div>
<div id="295" class="plabel">
295
</div>
<div id="296" class="plabel">
296
</div>
<div id="297" class="plabel">
297
</div>
<div id="298" class="plabel">
298
</div>
<div id="299" class="plabel">
299
</div>
<div id="300" class="plabel">
300
</div>
<div id="301" class="plabel">
301
</div>
<div id="302" class="plabel">
302
</div>
<div id="303" class="plabel">
303
</div>
<div id="304" class="plabel">
304
</div>
<div id="305" class="plabel">
305
</div>
<div id="306" class="plabel">
306
</div>
<div id="307" class="plabel">
307
</div>
<div id="308" class="plabel">
308
</div>
<div id="309" class="plabel">
309
</div>
<div id="310" class="plabel">
310
</div>
<div id="311" class="plabel">
311
</div>
<div id="312" class="plabel">
312
</div>
<div id="313" class="plabel">
313
</div>
<div id="314" class="plabel">
314
</div>
<div id="315" class="plabel">
315
</div>
<div id="316" class="plabel">
316
</div>
<div id="317" class="plabel">
317
</div>
<div id="318" class="plabel">
318
</div>
<div id="319" class="plabel">
319
</div>
<div id="320" class="plabel">
320
</div>
<div id="321" class="plabel">
321
</div>
<div id="322" class="plabel">
322
</div>
<div id="323" class="plabel">
323
</div>
<div id="324" class="plabel">
324
</div>
<div id="325" class="plabel">
325
</div>
<div id="326" class="plabel">
326
</div>
<div id="327" class="plabel">
327
</div>
<div id="328" class="plabel">
328
</div>
<div id="329" class="plabel">
329
</div>
<div id="330" class="plabel center">
330
</div>
<div id="331" class="plabel">
331
</div>
<div id="332" class="plabel">
332
</div>
<div id="333" class="plabel">
333
</div>
<div id="334" class="plabel">
334
</div>
<div id="335" class="plabel">
335
</div>
<div id="336" class="plabel">
336
</div>
<div id="337" class="plabel">
337
</div>
<div id="338" class="plabel">
338
</div>
<div id="339" class="plabel">
339
</div>
<div id="340" class="plabel">
340
</div>
<div id="341" class="plabel">
341
</div>
<div id="342" class="plabel">
342
</div>
<div id="343" class="plabel">
343
</div>
<div id="344" class="plabel">
344
</div>
<div id="345" class="plabel">
345
</div>
<div id="346" class="plabel">
346
</div>
<div id="347" class="plabel">
347
</div>
<div id="348" class="plabel">
348
</div>
<div id="349" class="plabel">
349
</div>
<div id="350" class="plabel">
350
</div>
<div id="351" class="plabel">
351
</div>
<div id="352" class="plabel">
352
</div>
<div id="353" class="plabel">
353
</div>
<div id="354" class="plabel">
354
</div>
<div id="355" class="plabel">
355
</div>
<div id="356" class="plabel">
356
</div>
<div id="357" class="plabel">
357
</div>
<div id="358" class="plabel">
358
</div>
<div id="359" class="plabel">
359
</div>
<div id="360" class="plabel">
360
</div>
<div id="361" class="plabel">
361
</div>
<div id="362" class="plabel">
362
</div>
<div id="363" class="plabel">
363
</div>
<div id="364" class="plabel">
364
</div>
<div id="365" class="plabel">
365
</div>
<div id="366" class="plabel">
366
</div>
<div id="367" class="plabel">
367
</div>
<div id="368" class="plabel">
368
</div>
<div id="369" class="plabel">
369
</div>
<div id="370" class="plabel">
370
</div>
<div id="371" class="plabel">
371
</div>
<div id="372" class="plabel">
372
</div>
<div id="373" class="plabel">
373
</div>
<div id="374" class="plabel">
374
</div>
<div id="375" class="plabel">
375
</div>
<div id="376" class="plabel">
376
</div>
<div id="377" class="plabel">
377
</div>
<div id="378" class="plabel">
378
</div>
<div id="379" class="plabel">
379
</div>
<div id="380" class="plabel">
380
</div>
<div id="381" class="plabel">
381
</div>
<div id="382" class="plabel">
382
</div>
<div id="383" class="plabel">
383
</div>
<div id="384" class="plabel">
384
</div>
<div id="385" class="plabel">
385
</div>
<div id="386" class="plabel">
386
</div>
<div id="387" class="plabel">
387
</div>
<div id="388" class="plabel">
388
</div>
<div id="389" class="plabel">
389
</div>
<div id="390" class="plabel">
390
</div>
<div id="391" class="plabel">
391
</div>
<div id="392" class="plabel">
392
</div>
<div id="393" class="plabel">
393
</div>
<div id="394" class="plabel">
394
</div>
<div id="395" class="plabel">
395
</div>
<div id="396" class="plabel">
396
</div>
<div id="397" class="plabel">
397
</div>
<div id="398" class="plabel">
398
</div>
<div id="399" class="plabel">
399
</div>
<div id="400" class="plabel">
400
</div>
<div id="401" class="plabel">
401
</div>
<div id="402" class="plabel">
402
</div>
<div id="403" class="plabel">
403
</div>
<div id="404" class="plabel">
404
</div>
<div id="405" class="plabel">
405
</div>
<div id="406" class="plabel">
406
</div>
<div id="407" class="plabel">
407
</div>
<div id="408" class="plabel">
408
</div>
<div id="409" class="plabel">
409
</div>
<div id="410" class="plabel">
410
</div>
<div id="411" class="plabel">
411
</div>
<div id="412" class="plabel">
412
</div>
<div id="413" class="plabel">
413
</div>
<div id="414" class="plabel">
414
</div>
<div id="415" class="plabel">
415
</div>
<div id="416" class="plabel">
416
</div>
<div id="417" class="plabel">
417
</div>
<div id="418" class="plabel">
418
</div>
<div id="419" class="plabel">
419
</div>
<div id="420" class="plabel">
420
</div>
<div id="421" class="plabel">
421
</div>
<div id="422" class="plabel">
422
</div>
<div id="423" class="plabel">
423
</div>
<div id="424" class="plabel">
424
</div>
<div id="425" class="plabel">
425
</div>
<div id="426" class="plabel">
426
</div>
<div id="427" class="plabel">
427
</div>
<div id="428" class="plabel">
428
</div>
<div id="429" class="plabel">
429
</div>
<div id="430" class="plabel">
430
</div>
<div id="431" class="plabel">
431
</div>
<div id="432" class="plabel">
432
</div>
<div id="433" class="plabel">
433
</div>
<div id="434" class="plabel">
434
</div>
<div id="435" class="plabel">
435
</div>
<div id="436" class="plabel">
436
</div>
<div id="437" class="plabel">
437
</div>
<div id="438" class="plabel">
438
</div>
<div id="439" class="plabel">
439
</div>
<div id="440" class="plabel">
440
</div>
<div id="441" class="plabel">
441
</div>
<div id="442" class="plabel">
442
</div>
<div id="443" class="plabel">
443
</div>
<div id="444" class="plabel">
444
</div>
<div id="445" class="plabel">
445
</div>
<div id="446" class="plabel">
446
</div>
<div id="447" class="plabel">
447
</div>
<div id="448" class="plabel">
448
</div>
<div id="449" class="plabel">
449
</div>
<div id="450" class="plabel">
450
</div>
<div id="451" class="plabel">
451
</div>
<div id="452" class="plabel">
452
</div>
<div id="453" class="plabel">
453
</div>
<div id="454" class="plabel">
454
</div>
<div id="455" class="plabel">
455
</div>
<div id="456" class="plabel">
456
</div>
<div id="457" class="plabel">
457
</div>
<div id="458" class="plabel">
458
</div>
<div id="459" class="plabel">
459
</div>
<div id="460" class="plabel">
460
</div>
<div id="461" class="plabel">
461
</div>
<div id="462" class="plabel">
462
</div>
<div id="463" class="plabel">
463
</div>
<div id="464" class="plabel">
464
</div>
<div id="465" class="plabel">
465
</div>
<div id="466" class="plabel">
466
</div>
<div id="467" class="plabel">
467
</div>
<div id="468" class="plabel">
468
</div>
<div id="469" class="plabel">
469
</div>
<div id="470" class="plabel">
470
</div>
<div id="471" class="plabel">
471
</div>
<div id="472" class="plabel">
472
</div>
<div id="473" class="plabel">
473
</div>
<div id="474" class="plabel">
474
</div>
<div id="475" class="plabel">
475
</div>
<div id="476" class="plabel">
476
</div>
<div id="477" class="plabel">
477
</div>
<div id="478" class="plabel">
478
</div>
<div id="479" class="plabel">
479
</div>
<div id="480" class="plabel">
480
</div>
<div id="481" class="plabel">
481
</div>
<div id="482" class="plabel">
482
</div>
<div id="483" class="plabel">
483
</div>
<div id="484" class="plabel">
484
</div>
<div id="485" class="plabel">
485
</div>
<div id="486" class="plabel">
486
</div>
<div id="487" class="plabel">
487
</div>
<div id="488" class="plabel">
488
</div>
<div id="489" class="plabel">
489
</div>
<div id="490" class="plabel">
490
</div>
<div id="491" class="plabel">
491
</div>
<div id="492" class="plabel">
492
</div>
<div id="493" class="plabel">
493
</div>
<div id="494" class="plabel">
494
</div>
<div id="495" class="plabel">
495
</div>
<div id="496" class="plabel">
496
</div>
<div id="497" class="plabel">
497
</div>
<div id="498" class="plabel">
498
</div>
<div id="499" class="plabel">
499
</div>
<div id="500" class="plabel">
500
</div>
<div id="501" class="plabel">
501
</div>
<div id="502" class="plabel">
502
</div>
<div id="503" class="plabel">
503
</div>
<div id="504" class="plabel">
504
</div>
<div id="505" class="plabel">
505
</div>
<div id="506" class="plabel">
506
</div>
<div id="507" class="plabel">
507
</div>
<div id="508" class="plabel">
508
</div>
<div id="509" class="plabel">
509
</div>
<div id="510" class="plabel">
510
</div>
<div id="511" class="plabel">
511
</div>
<div id="512" class="plabel">
512
</div>
<div id="513" class="plabel">
513
</div>
<div id="514" class="plabel">
514
</div>
<div id="515" class="plabel">
515
</div>
<div id="516" class="plabel">
516
</div>
<div id="517" class="plabel">
517
</div>
<div id="518" class="plabel">
518
</div>
<div id="519" class="plabel">
519
</div>
<div id="520" class="plabel">
520
</div>
<div id="521" class="plabel">
521
</div>
<div id="522" class="plabel">
522
</div>
<div id="523" class="plabel">
523
</div>
<div id="524" class="plabel">
524
</div>
<div id="525" class="plabel">
525
</div>
<div id="526" class="plabel">
526
</div>
<div id="527" class="plabel">
527
</div>
<div id="528" class="plabel">
528
</div>
<div id="529" class="plabel">
529
</div>
<div id="530" class="plabel">
530
</div>
<div id="531" class="plabel">
531
</div>
<div id="532" class="plabel">
532
</div>
<div id="533" class="plabel">
533
</div>
<div id="534" class="plabel">
534
</div>
<div id="535" class="plabel">
535
</div>
<div id="536" class="plabel">
536
</div>
<div id="537" class="plabel">
537
</div>
<div id="538" class="plabel">
538
</div>
<div id="539" class="plabel">
539
</div>
<div id="540" class="plabel">
540
</div>
<div id="541" class="plabel">
541
</div>
<div id="542" class="plabel">
542
</div>
<div id="543" class="plabel">
543
</div>
<div id="544" class="plabel">
544
</div>
<div id="545" class="plabel">
545
</div>
<div id="546" class="plabel">
546
</div>
<div id="547" class="plabel">
547
</div>
<div id="548" class="plabel">
548
</div>
<div id="549" class="plabel">
549
</div>
<div id="550" class="plabel">
550
</div>
<div id="551" class="plabel">
551
</div>
<div id="552" class="plabel">
552
</div>
<div id="553" class="plabel">
553
</div>
<div id="554" class="plabel">
554
</div>
<div id="555" class="plabel">
555
</div>
<div id="556" class="plabel">
556
</div>
<div id="557" class="plabel">
557
</div>
<div id="558" class="plabel">
558
</div>
<div id="559" class="plabel">
559
</div>
<div id="560" class="plabel">
560
</div>
<div id="561" class="plabel">
561
</div>
<div id="562" class="plabel">
562
</div>
<div id="563" class="plabel">
563
</div>
<div id="564" class="plabel">
564
</div>
<div id="565" class="plabel">
565
</div>
<div id="566" class="plabel">
566
</div>
<div id="567" class="plabel">
567
</div>
<div id="568" class="plabel">
568
</div>
<div id="569" class="plabel">
569
</div>
<div id="570" class="plabel">
570
</div>
<div id="571" class="plabel">
571
</div>
<div id="572" class="plabel">
572
</div>
<div id="573" class="plabel">
573
</div>
<div id="574" class="plabel">
574
</div>
<div id="575" class="plabel">
575
</div>
<div id="576" class="plabel">
576
</div>
<div id="577" class="plabel">
577
</div>
<div id="578" class="plabel">
578
</div>
<div id="579" class="plabel">
579
</div>
<div id="580" class="plabel">
580
</div>
<div id="581" class="plabel">
581
</div>
<div id="582" class="plabel">
582
</div>
<div id="583" class="plabel">
583
</div>
<div id="584" class="plabel">
584
</div>
<div id="585" class="plabel">
585
</div>
<div id="586" class="plabel">
586
</div>
<div id="587" class="plabel">
587
</div>
<div id="588" class="plabel">
588
</div>
<div id="589" class="plabel">
589
</div>
<div id="590" class="plabel">
590
</div>
<div id="591" class="plabel">
591
</div>
<div id="592" class="plabel">
592
</div>
<div id="593" class="plabel">
593
</div>
<div id="594" class="plabel">
594
</div>
<div id="595" class="plabel">
595
</div>
<div id="596" class="plabel">
596
</div>
<div id="597" class="plabel">
597
</div>
<div id="598" class="plabel">
598
</div>
<div id="599" class="plabel">
599
</div>
<div id="600" class="plabel">
600
</div>
<div id="601" class="plabel">
601
</div>
<div id="602" class="plabel">
602
</div>
<div id="603" class="plabel">
603
</div>
<div id="604" class="plabel">
604
</div>
<div id="605" class="plabel">
605
</div>
<div id="606" class="plabel">
606
</div>
<div id="607" class="plabel">
607
</div>
<div id="608" class="plabel">
608
</div>
<div id="609" class="plabel">
609
</div>
<div id="610" class="plabel">
610
</div>
<div id="611" class="plabel">
611
</div>
<div id="612" class="plabel">
612
</div>
<div id="613" class="plabel">
613
</div>
<div id="614" class="plabel">
614
</div>
<div id="615" class="plabel">
615
</div>
<div id="616" class="plabel">
616
</div>
<div id="617" class="plabel">
617
</div>
<div id="618" class="plabel">
618
</div>
<div id="619" class="plabel">
619
</div>
<div id="620" class="plabel">
620
</div>
<div id="621" class="plabel">
621
</div>
<div id="622" class="plabel">
622
</div>
<div id="623" class="plabel">
623
</div>
<div id="624" class="plabel">
624
</div>
<div id="625" class="plabel">
625
</div>
<div id="626" class="plabel">
626
</div>
<div id="627" class="plabel">
627
</div>
<div id="628" class="plabel">
628
</div>
<div id="629" class="plabel">
629
</div>
<div id="630" class="plabel">
630
</div>
<div id="631" class="plabel">
631
</div>
<div id="632" class="plabel">
632
</div>
<div id="633" class="plabel">
633
</div>
<div id="634" class="plabel">
634
</div>
<div id="635" class="plabel">
635
</div>
<div id="636" class="plabel">
636
</div>
<div id="637" class="plabel">
637
</div>
<div id="638" class="plabel">
638
</div>
<div id="639" class="plabel">
639
</div>
<div id="640" class="plabel">
640
</div>
<div id="641" class="plabel">
641
</div>
<div id="642" class="plabel">
642
</div>
<div id="643" class="plabel">
643
</div>
<div id="644" class="plabel">
644
</div>
<div id="645" class="plabel">
645
</div>
<div id="646" class="plabel">
646
</div>
<div id="647" class="plabel">
647
</div>
<div id="648" class="plabel">
648
</div>
<div id="649" class="plabel center">
649
</div>
<div class="plabel empty"></div>
<div class="plabel empty"></div>
<div class="plabel empty"></div>
<div class="plabel empty"></div>
<div class="plabel empty"></div>
<div class="plabel empty"></div>
<div class="plabel empty"></div>
<div class="plabel empty"></div>
<div class="plabel empty"></div>
<div class="plabel empty"></div>
</div>
</div>
</body>
<script>
const pLabelStart = document.getElementById("0");
const pLabelMiddle = document.getElementById("330");
const pLabelEnd = document.getElementById("649");
const scrollToStart = document.getElementById("scroll-to-start");
const scrollToMiddle = document.getElementById("scroll-to-middle");
const scrollToEnd = document.getElementById("scroll-to-end");
scrollToStart.addEventListener('click', () => {
pLabelStart.scrollIntoView({
block: "center",
behavior: "instant",
inline: "center",
});
})
scrollToMiddle.addEventListener('click', () => {
pLabelMiddle.scrollIntoView({
block: "center",
behavior: "instant",
inline: "center",
});
})
scrollToEnd.addEventListener('click', () => {
pLabelEnd.scrollIntoView({
block: "center",
behavior: "instant",
inline: "center",
});
})
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment