Components: Virtual scroll infinite loop in both direction

[MurhafSousli]

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

Infinite scroll in both direction

What is the current behavior?

Currently the infinite scroll is not possible in both direction

What is the use-case or motivation for changing an existing behavior?

I am using horizontal virtual scroll, I need to provide infinite scroll in both direction and keep the current index always in center of the view port

Assume the array is

[0][1][2][3][4][5][6][7][8][9]

                       currIndex
                          |       
  [6][7]       |   [8][9][0][1][2]   |   [3][4][5]
Not rendered   |      Rendered       |  Not rendered

Let's say user go to viewport.scrollToIndex(2)

                       currIndex
                          |       
  [8][9]       |   [0][1][2][3][4]   |   [5][6][7]
Not rendered   |      Rendered       |  Not rendered

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: 7.0.1
Material: 7.0.2

Is there anything else we should know?

[MurhafSousli]

I have tried to implement it with current functionality (7.0.2), can anyone check this example, maybe it is simple!
stackblitz
stackoverflow question

[mmalerba]

I would suggest using a custom data source for this (see the custom data source example from the virtual scroll docs)

[MurhafSousli]

@mmalerba I tried to implement it in this stackblitz but I still haven't got it right

[mmalerba]

here's an example that adds new copies of the data when you get near the end of the list: https://stackblitz.com/edit/angular-qpsjxm?file=app/cdk-virtual-scroll-data-source-example.ts

[MurhafSousli]

@mmalerba Thanks! that looks good! but is it possible to do the same for the opposite direction? I want to make the same for scrolling up

[mmalerba]

You could start off scrolled to the middle of the list, that would allow the user to scroll up or down

[MurhafSousli]

@mmalerba I tried to apply the same for scrolling up, I am very close to get the solution but scrolling up is reaching the top, it should work like scrolling to bottom.

Here is my trial

https://stackblitz.com/edit/angular-qpsjxm-x8csmt?file=app%2Fcdk-virtual-scroll-data-source-example.ts

I used this.viewPort.scrollToIndex(range.start); to scroll down when new items are added to the top, but it is now working as expected, any idea how to fix it?

Thanks!

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}