Scroll jumping occurs when using a container with CSS Grid layout (grid-gap)

[omardoma]

First, I would like to thank you for the great library, second, I have found an issue that I wanted to report so we can improve the library further.

So basically if you have the following code:

<virtual-scroller #scroll [items]="users" (vsEnd)="fetchMore($event)">
  <div class="users" #container>
    <div class="user" *ngFor="let current of scroll.viewPortItems">
      anything
    </div>
  </div>
</virtual-scroller>

While the container has the following css properties:

.users {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 40px;
}

Scrolling jumps because it doesn't account for the grid gap in the child size calculation, which leads to a very noticeable glitch as the content is translated whenever the height of the child is reached, not when the full height of the (child + grid-gap) is reached.

As a workaround, I have removed the grid-gap and used margins on the child elements instead, and it fixed the issue, so that narrows it down to the described behavior above.

I hope I have explained the issue well enough.

[omardoma]

@rintoj Any update on this please?

[manju-reddys]

You have to apply on scrollable-content class, because the elements will be rendered on to the scrollable-content div which will be injected (added) by this lib.

::ng-deep {
        .scrollable-content {
            display: -ms-grid;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
            grid-gap: .125rem;
        }
    }

<virtual-scroller #scroll [items]="users" (vsEnd)="fetchMore($event)">
    <div class="user" *ngFor="let current of scroll.viewPortItems">
      anything
    </div>
</virtual-scroller>

[samhoseinkhani]

@manju-reddys it's not the right thing to do.

[tobium]

any news here? The problem is still there...