What am I doing wrong here?

[nonetrix]

Why doesn't the "test" message print when I scroll to the bottom? I've tried various things, like changing the bottomThreshold and changing the test() function to a async or a regular function. I apologize if I am a bit noobish, because I am to be completely honest. I understand that this may not be the appropriate placel for seeking support, and I apologize for cluttering the issues. However, it would be also helpful if you could provide an example on how to implement infinite scrolling with some API as so this issue isn't completely useless and not just for support hopefully

<script>
    import VirtualScroll from "svelte-virtual-scroll-list"

    let items = [
        {id: 1, text: "one"},
        {id: 2, text: "one"},
        {id: 3, text: "one"},
        {id: 4, text: "one"},
        {id: 5, text: "one"},
        {id: 6, text: "one"},
        {id: 7, text: "one"},
        {id: 8, text: "one"},
        {id: 9, text: "one"},
        {id: 10, text: "one"},
        {id: 11, text: "one"},
        {id: 12, text: "one"},
        {id: 13, text: "one"},
        {id: 14, text: "one"},
        {id: 15, text: "one"},
        {id: 16, text: "one"},
        {id: 17, text: "one"},
        {id: 18, text: "one"},
        {id: 19, text: "one"},
        {id: 20, text: "one"},
        {id: 21, text: "one"},
        {id: 22, text: "one"},
        {id: 23, text: "one"},
        {id: 24, text: "one"},
        {id: 25, text: "one"},
    ]

    async function test() {
        console.log("test")
    }
</script>
<div class="vs">
    <VirtualScroll
            data={items}
            key="id"
            let:data
            bottomThreshold=50
            on:bottom={test}
    >
        <div slot="header">
            This is a header set via slot
        </div>
        <div>
            {data.text}
        </div>
        <div slot="footer">
            This is a footer set via slot
        </div>
    </VirtualScroll>
</div>

Thanks in advance!

[v1ack]

You need to set height for parent div .vs {height: 300px} example or use pageMode example

[nonetrix]

I switched to pages mode and it works now. However, when data is added it seems the page likes to jump around oddly and the scroll bar is jittery sometimes when dragged with mouse. The later might be fixable with estimateSize but setting it doesn't seem to effect much. But overall seems to be working good enough for my project to move on to other issues