Feature: Flex Grid VScroll

[john-theo]

Amazing work! I have been looking for a js vscroll solution, without any frameworks. And I ended up here. I tried the demo, and am largely satisfied with the current result. But when it comes to "multi-column" vscroll, most vscroll project just put it in the wip or gotcha section. But I think in my case, padding height of a flex css grid is calculatable.

I have a bunch of square containers with their parent has these css styles:

display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 20px;

How should I use this project? Do you have any suggestions for me?

[dhilt]

@john-theo I'm very glad that you have found this project. Of course, multi-column issue has been raised several times in related ngx-ui-scroll project, and this is what we have reached at this moment:

• Angular Ngx Ui Scroll Grouping 2, the demo of static grouping of the dataset by fixed number of columns;
• Angular Ngx Ui Scroll Grouping Flex, the demo of dynamic grouping, where the number of columns is determined by the width of the viewport, which can be changed at runtime.

Both cases provide an additional "grouping" layer between the initial flat dataset and the Scroller, which also wants flat list. Scroller's item becomes a group of initial items. The logic of this layer can be taken from app.component.ts. Templating should be tweaked. You'll need to move inner grouping template (*ngFor) from the html page code to the item template factory, like

  const template = (group: Item[]) =>
    `<div class="group">` +
      group.map(item =>
        `<div class="item"><span>${item.data.id}</span>) ${item.data.text}</div>`
      ) +
    `</div>`

If you can start make vscroll-native grouping demo (for example by forking the first stackblitz sample), I will help you to finish it and make it work.

[john-theo]

Thank you so much! I am working on a project that needs virtual scroll functionality, I will try to figure something out based on your example. Any luck on it, I would create a CodePen or something and keep you posted here! Thanks again for your suggestion!

[dhilt]

@john-theo I dream to create a list of vscroll-native demos on stackblitz, codepen or whatever, and a grouping demo would be very important. I can't find time to do this by myself right now, but I gladly would join if you take any steps in this direction.