[FIXED] How to use overflow:hidden in Angular for only one page?

Issue

I would like to make my window pane unscrollable. If I set my element to overflow: hidden, I can not scroll on any page, so I tried to do it in the CSS file of the component which I want unscrollable. However, the only way I managed achieve this was adding the unscrollable class name to the element of index.html.

.unscrollable{
    overflow: hidden;
}

However, in that case, all windows are unscrollable wherever I navigate on the page.

I tried to solve the problem by adding the following only to the component's CSS file:

.unscrollable{
    overflow: hidden !important;
}

but to no avail.

Does anyone have an idea on how to solve it? I am very confused by not being able to influence index.html depending on the component, especially since the tag is there.

Solution

This can be done by using angular's Renderer2

You can add overflow hidden css from that component to document's body using this.

import like this

import { Renderer2 } from '@angular/core';

then declare in constructor

constructor(private _renderer: Renderer2)

then use it on ngOnInit()

ngOnInit(){
  this._renderer.setStyle(document.body, 'overflow', 'hidden');
}

this will add overflow hidden to body and page will be unscrollable.

and then make sure to remove overflow hidden from body on that component destroy use ngOnDestroy() to do that

ngOnDestroy(): void {
    this._renderer.removeStyle(document.body, 'overflow');
  }

Answered By - Aniket Gawas

Answer Checked By - Clifford M. (PHPFixing Volunteer)