By default the select-dropwon of angular-material will allow the page to scroll and reposition itself accordingly.
On the original page of the material-documentation the select-dropdown shows a differetn behaviour: it blocks scrolling when openend:
https://material.angular.io/components/select/overview
How can I achieve this behaviour? I did not find any options or switch to disable scrolling when the select is clicked
EDIT: I did find that there is a thing called "mat-select-scroll-strategy", but it is not documented anywhere. Can anybody give me a hint how to use this?
To hide the scrollbar and disable scrolling, we can use the CSS overflow property. This property determines what to do with content that extends beyond the boundaries of its container. To prevent scrolling with this property, just apply the rule overflow: hidden to the body (for the entire page) or a container element.
The scrolling on web pages can be easily disabled using JavaScript through various ways but in this article we'll only see two ways to disable it which are listed below: Method 1: By overriding the window. onscroll function. Method 2: By setting the height of the body to 100% and overflow to hidden.
If you just want to prevent scrolling horizontally or vertically, then set the Body to overflow hidden in the designer. For reference see how to use custom code in the head of the project. I hope this helps!
Since the mat-select component injects a strategy through DI, you can provide an alternative in your component (or at the module level if you wish).
import { MAT_SELECT_SCROLL_STRATEGY } from '@angular/material';
import { Overlay, BlockScrollStrategy } from '@angular/cdk/overlay';
export function scrollFactory(overlay: Overlay): () => BlockScrollStrategy {
return () => overlay.scrollStrategies.block();
}
// ...
providers: [
{ provide: MAT_SELECT_SCROLL_STRATEGY, useFactory: scrollFactory, deps: [Overlay] }
]
--
STACKBLITZ
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With