@@ -129,6 +129,33 @@ onMounted(() => {
129
129
}
130
130
});
131
131
132
+
133
+ onMounted (() => {
134
+ if (tableContainer .value ) {
135
+ const thead = tableContainer .value .querySelector (' thead' );
136
+ const trElements = Array .from (tbody .value .querySelectorAll (' tr' ));
137
+
138
+ function updateVisibility () {
139
+ const theadBottom = thead .getBoundingClientRect ().bottom ;
140
+ trElements .forEach (tr => {
141
+ const trTop = tr .getBoundingClientRect ().top ;
142
+ if (trTop < theadBottom) {
143
+ tr .style .visibility = ' hidden' ;
144
+ } else {
145
+ tr .style .visibility = ' visible' ;
146
+ }
147
+ });
148
+ }
149
+
150
+ tableContainer .value .addEventListener (' scroll' , updateVisibility);
151
+ updateVisibility ();
152
+
153
+ onBeforeUnmount (() => {
154
+ tableContainer .value .removeEventListener (' scroll' , updateVisibility);
155
+ });
156
+ }
157
+ });
158
+
132
159
function toggleFullscreen (state ) {
133
160
isFullscreen .value = state;
134
161
step .value += 1 ;
@@ -156,15 +183,15 @@ function animate(timestamp) {
156
183
init .value += allTr .value .heights [scrollIndex .value ];
157
184
if (hasReachedScrollBottom () || scrollIndex .value >= allTr .value .heights .length ) {
158
185
init .value = 0 ;
159
- scrollIndex .value = 0 ;
186
+ scrollIndex .value = - 1 ;
160
187
}
161
188
189
+ scrollIndex .value += 1 ;
162
190
if (tableContainer .value ) {
163
191
tableContainer .value .scrollTo ({
164
192
top: init .value ,
165
193
behavior: ' smooth'
166
194
});
167
- scrollIndex .value += 1 ;
168
195
}
169
196
170
197
lastTimestamp .value = timestamp;
@@ -291,7 +318,7 @@ defineExpose({
291
318
containerType: 'inline-size',
292
319
position: 'relative',
293
320
overflow: 'auto',
294
- fontFamily: FINAL_CONFIG.fontFamily
321
+ fontFamily: FINAL_CONFIG.fontFamily,
295
322
}"
296
323
:class =" { 'vue-ui-responsive' : isResponsive, 'is-playing': !isPaused }"
297
324
@mouseenter =" pauseOnHover()"
@@ -307,7 +334,7 @@ defineExpose({
307
334
...FINAL_CONFIG.style,
308
335
border: `${FINAL_CONFIG.border.size}px solid ${FINAL_CONFIG.border.color}`,
309
336
width: '100%',
310
- borderCollapse: 'collapse'
337
+ borderCollapse: 'collapse'
311
338
}" >
312
339
<caption
313
340
ref =" caption"
@@ -359,13 +386,18 @@ defineExpose({
359
386
</tr >
360
387
</thead >
361
388
362
- <tbody v-if =" dataset.body && dataset.head" ref =" tbody" >
389
+ <tbody
390
+ v-if =" dataset.body && dataset.head" ref =" tbody"
391
+ :style =" {
392
+ clipPath: 'inset(0,0,0,0)'
393
+ }"
394
+ >
363
395
<tr
364
396
v-for =" (tr, i) in dataset.body"
365
397
:style =" {
366
398
...FINAL_CONFIG.tbody.tr.style,
367
399
border: `${FINAL_CONFIG.tbody.tr.border.size}px solid ${FINAL_CONFIG.tbody.tr.border.color}`,
368
- verticalAlign: 'middle'
400
+ verticalAlign: 'middle',
369
401
}"
370
402
>
371
403
<td
@@ -493,4 +525,5 @@ thead th, tbody td {
493
525
-ms-overflow-style : none ; /* IE and Edge */
494
526
scrollbar-width : none ; /* Firefox */
495
527
}
528
+
496
529
</style >
0 commit comments