sveltejs / svelte-virtual-list

A virtual list component for Svelte apps
https://svelte.dev/repl/f78ddd84a1a540a9a40512df39ef751b
Other
688 stars 58 forks source link

How to scroll to invisible element in the list? #50

Open rsousacode opened 3 years ago

rsousacode commented 3 years ago

How to scroll to invisible element in the list?

Using svelte "this binding" is not possible since the HTML element is null while invisible.

rsousacode commented 3 years ago

I got a very hacky solution (a boolean flag) to make it work with no apparent scrolling bugs with the help of _scrollTo3 provided here: https://github.com/sveltejs/svelte-virtual-list/issues/43.

This basically de-virtualize the list, but at least the load time of the page is still ok.

let handle = true

async function _scrollTo3 (index, opts) {
    // code 

    handle = false

}

async function handle_scroll(event) {
    // ...

    end = i;

    if(!handle) return // add this here

    const remaining = items.length - end;

    // ...

}
gitbreaker222 commented 3 years ago

I think in the mean time I've removed the _scrollTo3 function in favour for a clean PullRequest, which introduces now the function scrollToIndex. Maybe you like to check out the demo again and see, if the second column fits to your use-case, if you replace the random index with a specific one in App.svelte ln.22 like randomIndex = 100

https://svelte.dev/repl/1c36db7c1e7e4ef2bfb04874321412e5?version=3.20.1