Preventing from scrolling on viewport height

[spacepolice10]

Hey,

I'm not sure if there's a way to achieve something like this, but maybe. I have a component with ViewportList which always scrolls to the last element. It receives data twice. First one is cached from previous page. Second one — when additional data loaded. The problem is that additional data prepends the list. So I see how browser quickly gets me to the top of the page and then again at the position I set in ViewportList.

Maybe there's a way to stop that scroll to top action? Maybe there's a way to create some kind of extreme zero overscan so ViewportList prevents vieweport and DOM from height changes? I want it to stick to last element but without sacrificing loading additional data. Any help really appreciated. Thanks in advance

[oleggrishechkin]

Hi, @spacepolice10
What's a case? As I right understand you describe something like "chat".

I'll try case with prepending a large data to the list.

Will be good if you provide reproduction in codesandbox for example or some your code snippets

[spacepolice10]

@spacepolice10 I added buymeacoffee.com and now you can support me if you wish

There is something I would like to discuss regarding to providing you some financial help. Can we contact somewhere else about that? Maybe you happened to live in CIS and there's an option to send some cash directly p2p? If this is not the option I will find a way to use buymeacoffe

[spacepolice10]

@oleggrishechkin the main problem here is the flashing of prepended content. Also, I believe the same thing preventing from implementation of backward infinite list when you scroll up because if you prepend something browser pushes you to the end of the list. Maybe it is possible to somehow alter index changing behavior, so prepended content won't trigger scrolling in any form?

[oleggrishechkin]

@spacepolice10 I added buymeacoffee.com and now you can support me if you wish

There is something I would like to discuss regarding to providing you some financial help. Can we contact somewhere else about that? Maybe you happened to live in CIS and there's an option to send some cash directly p2p? If this is not the option I will find a way to use buymeacoffe

OK, @spacepolice10 you can email to oleggrishechkin@gmail.com

[spacepolice10]

@oleggrishechkin the main problem here is the flashing of prepended content. Also, I believe the same thing preventing from implementation of backward infinite list when you scroll up because if you prepend something browser pushes you to the end of the list. Maybe it is possible to somehow alter index changing behavior, so prepended content won't trigger scrolling in any form?

Have you ever heard about Virtuoso? It is virtualisation library that has an option like firstItemIndex. It can be used to change index manually. Would be cool to see something like that in ViewportList, so it solves both problems of prepending items

[oleggrishechkin]

@oleggrishechkin the main problem here is the flashing of prepended content. Also, I believe the same thing preventing from implementation of backward infinite list when you scroll up because if you prepend something browser pushes you to the end of the list. Maybe it is possible to somehow alter index changing behavior, so prepended content won't trigger scrolling in any form?

Have you ever heard about Virtuoso? It is virtualisation library that has an option like firstItemIndex. It can be used to change index manually. Would be cool to see something like that in ViewportList, so it solves both problems of prepending items

Yes, I have. I thinking about how to change rendered indexes manually. The problem is you should do scroll compensation at least for safari - because prepended items will shift down items below, but scrollTop will not be changed. So I need make a kind of anchoring to achieve scroll correction.

The best thing -
Save current rendered item in viewport as anchor, save offset and index. After updating items, find new index of this anchor item - do scrollToIndex. Scroll will be correct for all browsers. No flushing since everything will be called in layoutEffect.

The problem is how to implement API for saving anchor and finding new index in changed items array.
Maybe some callback to return new indexes with default auto-mode for cases like prepending items. firstItemIndex can be a solution too, but looks like it works only for prepending.

I tried in my experiments onItemsChange([oldStartIndex, oldEndIndex]) => [newStartIndex, newEndIndex] callback, and call it during render or in layoutEffect. It partially works.

[oleggrishechkin]

I added indexesShift in #53

It something like firstItemIndex (thank you for reference) but represents difference between old and new start index. You can use any number you want in theory - the main rule is nextIndexesShift - prevIndexesShift = nextStartIndex - prevStartIndex

It works for me in Chrome for prepending items but require a little bit client code to update indexesShift for any prepending.

[oleggrishechkin]

@spacepolice10 I published beta version of 7.0.0, this release includes indexesShift prop. You can try it. Be careful when upgrading since this 7.0.0 has a several breaking changes

[spacepolice10]

Thank you very much. Will try it ASAP. P.S. Did you receive the last email from me? Just in case

[oleggrishechkin]

Thank you very much. Will try it ASAP. P.S. Did you receive the last email from me? Just in case

Yes, everything is ok, thank you for your support.
(I have some issues with email sending, I don't know why)