how to use main scrollbar

Your issue may already be reported! Please search on the issue track before creating one.

Expected Behavior

I guess is a question, I want only 1 scrollbard (main scrollbar like you have in echoesplayer, I check the code but I dont know how you make it to work like that)

Actual Behavior

If I not use infiniteScrollContainer, (scrolled) never triggered. So I make it work with the container but I get two scrollbars like is normal.

Possible Solution

Steps To Reproduce / Demo (if applicable)

[ ] Please share a stackblitz or plunkr demo reproducing this issue
I’m using a fork of this project https://github.com/tomastrajan/angular-ngrx-material-starter

• I have a lazyloaded module with routes

PetComponent

<div [@routeAnimations]="o.isActivated && o.activatedRoute.routeConfig.path">
    <router-outlet #o="outlet"></router-outlet>
</div>

PetRoutes

{
    path: '',
    component: PetsComponent,
    children: [
      {
        path: '',
        component: PetListVirtualComponent,
        pathMatch: 'full',
        data: { title: 'pets.menu.petlist' },
        canActivate: [AuthGuardService],
      }
    ]
  }

PetListVirtualComponent

<div class="container mt-4 mb-4">
    <ng-container *ngIf="pets$ | async as pets; else loadingPets">
        <ng-container *ngIf="totalPets$ | async as totalPets; else loadingPets">
            <div class="container mt-4 mb-4 main-pets">
                <div class="row">
                    <h1 class="main-heading">{{ 'pets.list.title' | translate }} Virtual Version</h1>
                </div>
                <div infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50"
                    [infiniteScrollContainer]="'.main-pets'" [fromRoot]="true" (scrolled)="onScroll(pets.length, totalPets)">
                    <div class="row" [ngClass]="routeAnimationsElements">
                        <div class="col-12 col-md-6 col-lg-3" *ngFor="let pet of pets ; let index = index; trackBy: petsTrackByFn"
                            data-testid="pets-list">
                            <mat-card>
                                <a (click)="onViewPet(pet.id)">
                                    <mat-card-header>
                                        <mat-card-title>{{pet.name}}</mat-card-title>
                                        <mat-card-subtitle>{{pet.type}}</mat-card-subtitle>
                                    </mat-card-header>
                                    <img mat-card-image src="http://localhost:4000/{{pet.imageUrls[0].path}}" alt="Photo of a {{pet.name}}">
                                </a>
                                <mat-card-actions>
                                    <button mat-button [ngClass]="routeAnimationsElements">{{ 'pets.list.like' |
                                        translate
                                        |
                                        uppercase }}</button>
                                </mat-card-actions>
                            </mat-card>
                        </div>
                    </div>
                    <div *ngIf="loading && !empty" class="row justify-content-center">
                        <mat-spinner></mat-spinner>
                    </div>
                </div>
                <div class="row justify-content-center" *ngIf="empty">
                    <h3>Not more data!</h3>
                </div>
            </div>
        </ng-container>
    </ng-container>
    <ng-template #loadingPets>
        <div class="row justify-content-center">
            <mat-spinner></mat-spinner>
        </div>
    </ng-template>
    <div class="row justify-content-center">
        <div class="col-12 col-md-3">
            <button mat-raised-button color="primary" (click)="onCreatePet()" style="width:100%" [ngClass]="routeAnimationsElements"
                data-testid="pets-create-button">{{
                'pets.list.create' | translate }}</button>
        </div>
    </div>
</div>

CSS

.main-pets {
  height: 100vh;
  overflow-y: scroll;
}

Context

Your Environment

• Version used: Angular 7
• Browser Name and version: chrome
• (Optional) Operating System and version (desktop or mobile):
• (Optional) Link to your project: If is needed I can share you my repo 👍

[anthowm]

I make it work 💃 thanks ! In case someone get someone like this, the problem is angular material add some style for scroll named ‘.mat-drawer-content’ so my final code is like this

<div infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50" (scrolled)="onScroll(pets.length, totalPets)"
                    [infiniteScrollContainer]="'.mat-drawer-content'" [fromRoot]="true">{content}</div>

[rajat29gupta]

[fromRoot]=“true”

Thank you so much, It work for me 😃 I was stuck for 5 hours on this issue