BlockScrollStrategy does not block scrolling.

[jackwootton]

Bug, feature request, or proposal: Bug

What is the expected behavior?

Scrolling should be blocked when using BlockScrollStrategy. See ScrollStrategyOptions in the CDK Overlay documentation.

/** Block scrolling. */
block = () => new BlockScrollStrategy(this._viewportRuler, this._document);

What is the current behavior?

Scrolling is not blocked.

What are the steps to reproduce?

The StackBlitz scroll-strategy-block creates a CDK Overlay declaratively (anchored to a button).

Resize the window to force a scrollbar:

At this point, scrolling should be blocked since the BlockScrollStrategy is bound to the cdkConnectedOverlayScrollStrategy property of the cdkConnectedOverlay.

The overlay is anchored to a button:

<button mat-button #trigger="cdkOverlayOrigin" cdkOverlayOrigin>cdkOverlayOrigin</button>

The overlay just contains text within a mat-card:

<ng-template cdkConnectedOverlay [cdkConnectedOverlayScrollStrategy]="scrollStrategy"
[cdkConnectedOverlayOrigin]="trigger" cdkConnectedOverlayOpen="true">
  <mat-card>
    <mat-card-title>Overlay</mat-card-title>
       ...
    </mat-card>
</ng-template>

The cdkConnectedOverlayScrollStrategy is provided as a property.

StackBlitz is a fork of Google sidenav example (hence the weird file names). Importantly, the constructor injects ScrollStrategyOptions and defines the block method.

@Component({
  selector: 'sidenav-open-close-example',
  templateUrl: 'sidenav-open-close-example.html',
  styleUrls: ['sidenav-open-close-example.css'],
})
export class SidenavOpenCloseExample {
  scrollStrategy: ScrollStrategy;

  constructor(sso: ScrollStrategyOptions) {
    this.scrollStrategy = sso.block();
  }
}

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

angular 5.2.9 (also experienced with 6.0.0-rc.2)
typescript 2.7.2
Linux - Debian

Is there anything else we should know?

The Stackblitz has some debug code whereby a reference to the cdk-connected-overlay is passed into the attach() and detach() events and the scrollStrategy logged to the console.

export class SidenavOpenCloseExample {
  open: boolean;
  scrollStrategy: ScrollStrategy;

  constructor(private readonly sso: ScrollStrategyOptions) {
    this.scrollStrategy = this.sso.block();
  }
    public overlayDetach(ref: CdkConnectedOverlay) {
    console.log("overlayDetach", ref.scrollStrategy);
  }
  public overlayAttach(ref: CdkConnectedOverlay) {
    console.log("overlayAttach", ref.scrollStrategy);
  }
}

[crisbeto]

@jackwootton the BlockScrollStrategy won't do anything if your page wasn't scrollable to begin with. Here's a fork of your example that shows it working: https://stackblitz.com/edit/scroll-strategy-block-eh5hrg.

[jelbourn]

@crisbeto so is this working as intended?

[crisbeto]

Yes, I left the issue open in case there was any more info. Closing and it can be reopened if anything more comes up.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}