Scrolled doesn't work on Fullscreen md-sidenav-container

Hello, I’m trying to use scroll using the angular material with the md-sidenav-container element with the fullscreen attribute, but the scrolled method is not invoked. Code:

<md-sidenav-container fullscreen>
    <div infiniteScroll
        [infiniteScrollDistance]="2"
        [infiniteScrollUpDistance]="1.5"
        [infiniteScrollThrottle]="500"
        (scrolled)="onScrolled()">
        <router-outlet></router-outlet>
    </div>
</md-sidenav-container>

Any idea where I am wrong?

Thanks.

[nicholasp]

hi @orizens i have a similar issue. My setup is a navbar component with mat-sidenav-container and a different component newtask with a table mat-table. I’d like to use inside newtask the infiniteScroll cause the services is inside that component. I tried infiniteScrollContainer in newtask with .sidenav-grid-container (the scrollable div container which is outside newtask.ts). but i got error

ERROR Error: ngx-infinite-scroll {resolveContainerElement()}: selector for
    at resolveContainerElement (ngx-infinite-scroll.es5.js:24)
    at createScroller (ngx-infinite-scroll.es5.js:430)
    at ngx-infinite-scroll.es5.js:564
etc

[ebduhon]

The css property overflow only works on display: block with a specified size. I think you’re implementation of md-sidenav-container fullscreen makes use flexbox; consequently, an unspecified height in this case does not allow overflow scroll to work. I just implemented a combination of <div class="infinite-scroll-shell" onmouseover="document.body.style.overflow='hidden';" onmouseout="document.body.style.overflow='auto';"><router-outlet></router-outlet></div> I specified a height for the class infinite-scroll-shell. The child component initialized in the router-outlet has the div containing the infiniteScroll directive similar to your code. I would suggest doing a search on “flexbox scroll” for more information.