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