#`scroll` event emitted until end reached when scrolling lazy-rendered table

47 messages · Page 1 of 1 (latest)

spring notch
#

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

worthy geode
#

hi florian, did u figure it out?

spring notch
#

nope, not yet

#

and tbh I don't understand at all why it's behaving like that

#

it's super weird

worthy geode
#

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

spring notch
worthy geode
#

strange behavior

#

i like the approach tho

spring notch
#

the lazy-rendering itself?

worthy geode
#

keeping the list in view with the top and bottom-padding

spring notch
#

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

worthy geode
#

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

spring notch
#

interesting

#

which just sets scrollTop to the scrollTop at the beginning of the function?

worthy geode
#

a nice

#

cheeky

worthy geode
spring notch
#

yeah

#

it looks like dragging the scrollbar thumb results in the old behaviour tho

#

not really sure why tho

worthy geode
#

looks quite a minimal abstraction

#

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

spring notch
#

interesting

#

looks like everything's working with this one

worthy geode
#

yup!

#

pretty neat 🙂

spring notch
#

I think I will actually just use this one

#

Thank you very much for taking a look at it

worthy geode
spring notch
#

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

worthy geode
#

really weird weird bug this one

#

probably somewhere deeply hidden in the spec there is a line that describes this behavior

spring notch
#

yeah