`scroll` event emitted until end reached when scrolling lazy-rendered table
I'm currently working on an app which displays a lot of data in a table that often has thousands of rows. To reduce the time spent while rendering the table I wanted to make it lazy-rendered so it just renders the rows in view and adds padding before and after the elements to correct the scroll position.
The solution I came up with does just that but for some reason it keeps emitting scroll events when starting to scroll down until the end is reached, even when just increasing scrollTop by a few pixel and no manual scrolling at all. This doesn't happen when scrolling up for some reason? I created a minimal example that has the same behaviour like in my app here: https://playground.solidjs.com/anonymous/239274a9-b2f9-4c66-bb52-f9d69d40845f
I know there are more performance improvements available but this would make the example just more complicated.
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
28 Replies
hi florian, did u figure it out?
nope, not yet
and tbh I don't understand at all why it's behaving like that
it's super weird
ye i agree it's very weird
it has slightly different behavior with
wheel instead of scroll
but still very strange
it feels a bit like the browser tries to correct the scroll after changing the heights of the content, and that sort of gets in conflict with how you are calculating the scroll-positionhttps://playground.solidjs.com/anonymous/fad74136-8440-4678-866d-ed99755ad3c1 even with the inner-container having a fixed width it still has the same behavior
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
yeah I think the browser emits non-user
scroll events but I don't see why at all and I also wasn't able to find any other reason why a scroll event gets emitted other than by either the user scrolling or modifying scrollTop/Leftstrange behavior
i like the approach tho
the lazy-rendering itself?
keeping the list in view with the top and bottom-padding
yeah I actually used it before in my project like almost the same process but for some reason it didn't happen there
one sec, maybe I can share the code of it
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
it doesn't happen with absolutely positioned rows
so it's really something to do with how these static/relative positoned rows interact with the scrollTop
interesting
a friend of mine also just looked at it and came up with this: https://playground.solidjs.com/anonymous/31e97be8-c692-4915-8c59-7a59136066fc
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
which just sets scrollTop to the scrollTop at the beginning of the function?
a nice
cheeky
fixing that browser correction
yeah
it looks like dragging the scrollbar thumb results in the old behaviour tho
not really sure why tho
cleaned it up a bit https://playground.solidjs.com/anonymous/94c7ad26-2b39-47ec-9eee-989a3362fdbe
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
there is also https://primitives.solidjs.community/package/virtual/
Solid Primitives
A library of high-quality primitives that extend SolidJS reactivity
looks quite a minimal abstraction
this is that approach, but then applied with your abstraction: https://playground.solidjs.com/anonymous/ca289da7-20af-453c-8722-4411a7b9f361
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
so instead of padding you have 1 scroll-container 👉 1 relative container for the height 👉 1 absolute positioned container with top 👉 the selection of relative positioned divs
interesting
looks like everything's working with this one
yup!
pretty neat 🙂
I think I will actually just use this one
Thank you very much for taking a look at it
ur very welcome!
I was sitting at this problem for over a week now and tried so many different rendering techniques in the hope that improving the speed of the whole rerendering etc. would solve this ðŸ˜
I was about to just use plain js for it all
ye those sneaky ass browser stuff is horrific
really weird weird bug this one
probably somewhere deeply hidden in the spec there is a line that describes this behavior
yeah
well, lesson learned lol