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: https://github.com/jonasgeiler/svelte-tiny-virtual-list/blob/49ff096cd0a53deedab268cd090cc5f5c2ab0c2c/src/routes/demos/hacker-news/%2Bpage.svelte#L72

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}>