Turning off Browser Window Scrollbars Programmatically with Angular

Image by Gerry from Pixabay

Scenario

We are creating a layout where we only wish to have the content panel inside the layout be scrollable, and thus we wish to turn off scrolling for the viewport programmatically from within the component.

Approach

Inject the DOCUMENT and set overflow to hidden on the body.

constructor(@Inject(
    DOCUMENT) private document: Document,
    protected renderer: Renderer2
) {
    this.renderer.setStyle(document.body, 'overflow', 'hidden');
}

Demo

We set the vertical height of the body to 200vh , so if you turn disable the overflow rule in developer tools you’ll see that the page scrolls again.