7

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

enter image description here

lostintranslation
  • 23,756
  • 50
  • 159
  • 262
  • looking at the block scroll strategy code https://github.com/angular/components/blob/598db096e668aa7e9debd56eedfd127b7a55e371/src/cdk/overlay/scroll/block-scroll-strategy.ts#L37 it seams like this strategy blocks scrolling only of the body. What you need is a future request you may log at angular components – wnvko Mar 08 '20 at 10:59
  • @wnvko Ok, bummer. I tried the reposition strategy with no luck as well. Assuming something similar there too? – lostintranslation Mar 08 '20 at 16:00
  • have you checked scroll Strategies? https://material.angular.io/cdk/overlay/overview#scroll-strategies/ it seems BlockScrollStrategy is specifically for that – feech Jul 02 '20 at 16:53
  • @lostintranslation 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 – Mads Mønster Mar 29 '23 at 10:09

1 Answers1

4

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

Ivan Zinchenko
  • 71
  • 4