htmlcssangularindexingoverflow

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

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');
  }