GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-19 06:22:22 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Fix jittery virtual table scrolling on mobile (#2810)

Browse source 
* Fix jittery virtual table scrolling on mobile

* Fix table body appearing above header on iOS (dae)
This commit is contained in:
Abdo 2023-11-13 03:19:33 +03:00 committed by GitHub
parent b6102d0310
commit c5e2564523
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 32 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
ts/components/VirtualTable.svelte
View file

@ -21,7 +21,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
itemHeight, itemHeight,
) * itemHeight ) * itemHeight
: 0; : 0;
$: innerHeight = Math.max(containerHeight, itemsCount * itemHeight);
$: sliceLength = Math.ceil(containerHeight / itemHeight); $: sliceLength = Math.ceil(containerHeight / itemHeight);
$: startIndex = Math.floor(scrollTop / itemHeight); $: startIndex = Math.floor(scrollTop / itemHeight);
$: endIndex = Math.min(startIndex + sliceLength, itemsCount); $: endIndex = Math.min(startIndex + sliceLength, itemsCount);
@ -38,18 +37,29 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
bind:this={container} bind:this={container}
on:scroll={() => (scrollTop = container.scrollTop)} on:scroll={() => (scrollTop = container.scrollTop)}
> >
<div class="inner" style="height: {innerHeight}px;"> <table class="table {className}" tabindex="-1">
<table <thead>
class="table {className}"
tabindex="-1"
style="margin-top: {scrollTop}px"
>
<slot name="headers" /> <slot name="headers" />
</thead>
<tbody>
{#if itemHeight * startIndex > 0}
<tr><td style="height: {itemHeight * startIndex}px;" /></tr>
{/if}
{#each slice as index (index)} {#each slice as index (index)}
<slot name="row" {index} /> <slot name="row" {index} />
{/each} {/each}
</table>
</div> {#if itemHeight * itemsCount - itemHeight * endIndex > 0}
<tr>
<td
style="height: {itemHeight * itemsCount -
itemHeight * endIndex}px;"
/>
</tr>
{/if}
</tbody>
</table>
</div> </div>
<style lang="scss"> <style lang="scss">
@ -61,17 +71,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
margin: 0 auto; margin: 0 auto;
} }
.inner {
position: relative;
overflow-y: visible;
width: 100%;
}
.table { .table {
// Prevent infinite scrolling
position: absolute;
border-collapse: collapse; border-collapse: collapse;
white-space: nowrap; white-space: nowrap;
@ -88,5 +88,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
background: var(--border); background: var(--border);
text-align: center; text-align: center;
} }
:global(thead) {
position: sticky;
top: -1px;
overflow-y: auto;
overflow-x: hidden;
z-index: 1;
}
:global(tbody) {
overflow-y: scroll;
overflow-x: hidden;
}
} }
</style> </style>