Angular Material CDK Overlay scroll block not working when in nav sidebar

Question

I am adding a CDK overlay to a mat-sidenav. I would like to block scrolling on the mat-sidenav when the overlay is open.

I create overlay with scrolling blocked:

const overlayConfig = new OverlayConfig({
  scrollStrategy: this.overlay.scrollStrategies.block(),
});

const overlayRef = this.overlay.create(overlayConfig);

I am not doing anything special with the mat-sidenav, as its scrollable by default.

Here is a stackblitz showing the problem. You should be able to scroll the side-nav, then open and overlay and notice that the sidenav is still scrollable

https://stackblitz.com/edit/angular-z68qqg

Answer 1

You have to add cdk-scrollable directive on scrollable container, as described in this issue https://github.com/angular/components/issues/6157

Answer 2

You have to add cdkScrollable attribute to the scrolling element. Then applying a scrolling strategy would work. For your case, you can use a close strategy to close the popover on the scroll.