Issue with scrolling getting stuck in infinite loop

[JoshuaHintze]

I just gave this a quick try. I have 80 items all with height of 733px. When I scroll down to item number 10, the scroll but starts studdering all over the place and gets into a lock state, CPU goes crazy high. Items are being added/removed infinitly. Have you seen this?

<VirtualList
width={'560px'}
height={Number($globalFeedRef?.getBoundingClientRect().height)}
itemCount={80}
itemSize={733}

<div slot="item" let:index>
	<div style="height: 733px; width: 100%; background-color: azure; border: 1px solid red">{index}</div>
</div>

[jonasgeiler]

I have noticed this problem myself while working on the new website. There is actually a infinite loop detection but it doesn't seem to work sometimes... I will look into this but for now the only advice I can give you is making sure the container of the infinite list has a fixed height and maybe try using flexbox around the virtual list.
I unfortunately don't remember what exactly fixed my infinite growing problem while working on the new website, but maybeee the code will help:

svelte-tiny-virtual-list/src/routes/demos/hacker-news/+page.svelte

Line 72 in 49ff096

<VirtualList height={listHeight} itemSize={90} itemCount={list.length}>

If your problem still persists it would be great if you could recreate it in a REPL and I will look into it further: https://svelte.dev/repl

[conor888]

Just wanted to add that I had the same issue, it's because your item slot div, <div slot="item" let:index> doesn't have the style appended. Fix by changing to <div slot="item" let:index let:style {style}>