Description
Feature Description
I'd like to change the scroll strategy of a cdk menu to lock the screen instead of repositioning it.
This is possible in Material by providing a custom MAT_MENU_SCROLL_STRATEGY injection token.
/** Injection token that determines the scroll handling while the menu is open. */
export const MAT_MENU_SCROLL_STRATEGY = new InjectionToken<() => ScrollStrategy>(
'mat-menu-scroll-strategy',
{
providedIn: 'root',
factory: () => {
const overlay = inject(Overlay);
return () => overlay.scrollStrategies.reposition();
},
},
);
/** @docs-private */
export function MAT_MENU_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy {
return () => overlay.scrollStrategies.reposition();
}
/** @docs-private */
export const MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER = {
provide: MAT_MENU_SCROLL_STRATEGY,
deps: [Overlay],
useFactory: MAT_MENU_SCROLL_STRATEGY_FACTORY,
};The customizable scrollStrategy is then provided through DI in the constructor:
components/src/material/menu/menu-trigger.ts
Line 269 in e2bfb91
However, in the cdk version of the menu the scroll strategy is hard coded and does not allow for any customization:
/** Get the configuration object used to create the overlay. */
private _getOverlayConfig() {
return new OverlayConfig({
positionStrategy: this._getOverlayPositionStrategy(),
scrollStrategy: this._overlay.scrollStrategies.reposition(),
direction: this._directionality || undefined,
});
}components/src/cdk/menu/menu-trigger.ts
Line 252 in e2bfb91
Use Case
I am building a component library on top of the Angular CDK. I'd love to allow users to choose if they'd like to lock scrolling upon opening of a dropdown menu like the default of Angular Material's Menu: https://material.angular.io/components/menu/overview
Or keep the repositioning strategy that is currently the only option for the CDK.
I am specifically trying to implement this request from one of my users: spartan-ng/spartan#277
I think Angular Material supporting a custom strategy and the CDK not supporting a strategy is confusing to a lot of end users and I'd love for both to be customizable!