search

v1ack / svelte-virtual-scroll-list

Virtualized scrolling for big lists
https://v1ack.github.io/svelte-virtual-scroll-list/
MIT License
114 stars 18 forks source link

Issue when placed inside a grid or flex container #6

Open d3lm opened 2 years ago

d3lm commented 2 years ago

Hey there 👋 Thanks for this awesome library!

I am trying to place the virtual list in a flex / grid container but I am having issues getting the virtual list to behave correctly. Setting the height to 100% works as expected for the element as it uses the remaining height, but the scroll seems to be broken then.

I have created an example to demonstrate the issue: https://stackblitz.com/edit/vitejs-vite-d1z9nv?file=src%2FApp.svelte&terminal=dev

Any idea how to fix this?

mrxbox98 commented 2 months ago

Hi I was just running into the same issue. Did you happen to find a fix at some point?

mrxbox98 commented 2 months ago

I think I found the issue, atleast the one I was facing where trying to scroll back up would glitch out. The logic at https://github.com/v1ack/svelte-virtual-scroll-list/blob/master/src/lib/virtual.js#L151 is faulty when items are grids or flexboxes. Still not sure why though.

Here I an scrolling up the entire time: image

mrxbox98 commented 2 months ago

Found the issue for me. I had content-visibility: auto; in the element I was attempting to render so when the element was far away its height was set to 0 causing the scrollTop property of the root element to sporadically change.