Feature: Fetch on scrolling up, not bottom

[hazzo]

Feature: Fetch on scrolling up, not bottom

[hilongjw]

@hazzo I'm trying to implement dynamic on-demand loading, but there are still problems.here

[hazzo]

hmmmmmm but if you implement dynamic on-demand data it would be by using the fetch function? If it's like that how would you use the bottom scroll if you don't know the total elements of the list?

[hilongjw]

The current pattern is that the data is linearly increased and the rendering mode is also from top to bottom layout, and I have not done a good solution to implement it☹️.

[hazzo]

Hmmmmmm. But how much it will change everything if for example:

• Get a chunk of 50 items
• Scroll to bottom of that 50 items
• Scrolling up -> if > el.scrollTop = el.scrollHeight + offset > Trigger fetch & save position
• New chunk of 50 -> unshift every element to array (so you don't modify items positions)
• Calculate height of every element and as its been added to viewport scroll to saved position plus the added height to avoid to many jumps on scroll.
• Once data it's loaded the DOM recycling behavior it's just the same as now.
• Don't listen to scrolling down for fetching more data.

I know that maybe this is a tricky, but how this affects current rendering from top to bottom? I know that dynamic fetching could be kind of nightmare because you don't "know" where are you scrolling.

But as it is now only data it's being fetch on scroll down, why not only on scroll up and let this be decided by a prop in the component? What I mean, or you fetch data on scroll down or scroll up?

[Textras]

@hazzo you're using variable sizes too, correct? Curious, are you having any mem issues or crashes say from too many different template heights? Or do you have only a cpl perhaps? (sorry for the side question)

[agaripian]

Looking to do the same exact thing with this component. I am trying to fetch data when user scrolls up to load older chat history. @hazzo any luck with this? Or did you go down another route.

[hazzo]

@agaripian I took another approach. I'm using computed property and benefiting of how vue manages everything in virtual DOM. So I load data on scroll up or down and then scrolling back to last known position. it's no fluent as this component but for sure more memory and time efficient. Every virtual list component I look does not get into consideration the possibility for multiple methods to load more data.