fix(VirtualList): don't render top spacer if topPad is bellow 0
This commit is contained in:
@@ -211,9 +211,14 @@ const throttledNearBottom = throttle((lastVisibleIndex: number) => {
|
|||||||
}, 200); // 200ms debounce
|
}, 200); // 200ms debounce
|
||||||
|
|
||||||
// Calculate top/bottom padding for spacer elements
|
// Calculate top/bottom padding for spacer elements
|
||||||
|
// In CSS Grid, gap creates space BETWEEN elements.
|
||||||
|
// The top spacer should place the first row at its virtual offset.
|
||||||
|
// Grid layout: [spacer]--gap--[row0]--gap--[row1]...
|
||||||
|
// spacer height + gap = first row's start position
|
||||||
const topPad = $derived(
|
const topPad = $derived(
|
||||||
virtualizer.items.length > 0 ? virtualizer.items[0].start - gap : 0,
|
virtualizer.items.length > 0 ? virtualizer.items[0].start - gap : 0,
|
||||||
);
|
);
|
||||||
|
|
||||||
const botPad = $derived(
|
const botPad = $derived(
|
||||||
virtualizer.items.length > 0
|
virtualizer.items.length > 0
|
||||||
? Math.max(
|
? Math.max(
|
||||||
@@ -261,15 +266,18 @@ $effect(() => {
|
|||||||
{#snippet content()}
|
{#snippet content()}
|
||||||
<div
|
<div
|
||||||
style:grid-template-columns="repeat({columns}, minmax(0, 1fr))"
|
style:grid-template-columns="repeat({columns}, minmax(0, 1fr))"
|
||||||
|
style:gap="{gap}px"
|
||||||
class="grid w-full"
|
class="grid w-full"
|
||||||
>
|
>
|
||||||
<!-- Top spacer for padding-based virtualization -->
|
<!-- Top spacer for padding-based virtualization -->
|
||||||
|
{#if topPad > 0}
|
||||||
<div
|
<div
|
||||||
style:grid-column="1 / -1"
|
style:grid-column="1 / -1"
|
||||||
style:height="{topPad}px"
|
style:height="{topPad}px"
|
||||||
class="shrink-0"
|
class="shrink-0"
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
{#each virtualizer.items as row (row.key)}
|
{#each virtualizer.items as row (row.key)}
|
||||||
{#if row.index < rowCount}
|
{#if row.index < rowCount}
|
||||||
|
|||||||
Reference in New Issue
Block a user