Horizontal Infinite Virtual list scroll support

[JohnRSim]

Should the infinite loader be initiated through a dispatched event when last item is reached?

The footer slot is positioned under the list and gets immediately triggered - I tried flex row position on the virtual-list-wrapper.

  <div slot="footer">
    <InfiniteLoading on:infinite={infiniteHandler} />
  </div>

Thanks

[JohnRSim]

Also tried to add white-space:nowrap with inline blocks the footer now appears at the end of the generated list but gets triggered at the start and keeps firing the infinite event thinking the screen has not filled up?

    /**
     * infiniteHandler
     * @param param0
     */
    function infiniteHandler({ detail: { complete, error, reset, loaded } }) {
        console.log('[infiniteHandler]',currentMonth,complete, error, reset, loaded);
        try {
            // Normally you'd make an http request here...
            currentMonth++;
            const newData = daysOfTheMonthDetailed(2022,currentMonth);

            data = [...data, ...newData];
            console.log('[infiniteHandler]',data,currentMonth);

            if (currentMonth === 5) {
                complete();
            } else {
                setTimeout(() => {
                    loaded();
                }, 800)
            }
        } catch (e) {
            error();
        }
    }

    <nav class="timeline" bind:offsetWidth="{listWidth}">
        <div class="invisibleScroll">
            <VirtualList 
                on:afterScroll="{virtualScroll}"
                on:itemsUpdated="{() => {console.log('itemsUpdated')}}"
                scrollDirection="horizontal"
                width="{listWidth}"
                height="100%"
                itemCount={data.length}
                itemSize={50}>
                <div class="item" slot="item" let:index let:style {style}>
                    <span>{data[index].dayOfWeekLabel}</span>
                    <span>{data[index].day}</span>
                </div>
                <div slot="footer" style="display:inline-block;min-height:60px;min-width:40px;background:red;">
                {#if (listWidth > 0)}
                  <InfiniteLoading on:infinite={infiniteHandler} />
                 {/if}
                </div>
            </VirtualList>

    .virtual-list-wrapper {
        white-space: nowrap;
    }
    .virtual-list-wrapper > div {
        display: inline-block;
    }

[JohnRSim]

Looking at the svelte-infinite-loading lib - looks like the check needs to be handled here as it is detecting position from the top not left.