Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable Scrolling when angular-material select is open

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?

like image 253
Tobias Gassmann Avatar asked Oct 23 '17 11:10

Tobias Gassmann


People also ask

How do I stop my CSS from scrolling?

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.

How do you stop scrolling using JS?

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.

How do I disable scrolling in Webflow?

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!


1 Answers

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

like image 65
Will Howell Avatar answered Sep 23 '22 12:09

Will Howell