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

Tome

looking at the block scroll strategy code github.com/angular/components/blob/… it seams like this strategy blocks scrolling only of the body. What you need is a future request you may log at angular components – Wayne

@Wayne Ok, bummer. I tried the reposition strategy with no luck as well. Assuming something similar there too? – Tome

have you checked scroll Strategies? material.angular.io/cdk/overlay/overview#scroll-strategies it seems BlockScrollStrategy is specifically for that – Apologete

@Tome did you manage to solve this problem, i'm facing the same problem and I tried with the cdk-scrollable directive but it didn't help me much. Thanks in advance – Dropkick

Answer 1

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

Impinge

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.

Merchant