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

Question

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.

You could have a div that is 100% width and 100vh as height in that particular page that's scrollable. — Jacopo Sciampi
– Jacopo Sciampi, Commented Oct 20, 2022 at 9:34
Thanks for the answer, however, the parent div of the component's page fills the body, but there is still some scrollable space left - my guess is because of the header reamining scrollable. — Maligetzian
– Maligetzian, Commented Oct 20, 2022 at 10:18

Aniket Gawas · Accepted Answer · 2022-10-20 09:55:59Z

3

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 Oct 20, 2022 at 9:55

Aniket Gawas

1942 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maligetzian Over a year ago

Thank you very much! It indeed solved my problem, and introduced me to this great feature of Angular.

saravana priyan · Accepted Answer · 2022-10-20 09:35:01Z

0

You can make a window sized div non-scrollable like this:

.unscrollable{
  width:100vw;
  height:100vh;
  overflow:hidden;
}

answered Oct 20, 2022 at 9:35

saravana priyan

5107 silver badges24 bronze badges

1 Comment

Maligetzian Over a year ago

Unfortunately, it didn't solve the problem for the same reason as Jacopo Sciampi's solution. Thanks for the contribution anyway!

Adam · Accepted Answer · 2024-11-12 11:32:47Z

0

something like this would be enough:

document.body.style.overflow = 'hidden';

and add

  ngOnDestroy() {
    document.body.style.overflow = 'auto';
  }

but using renderer (Renderer2) would be better as it follows Angular's best practices for DOM manipulation.

this.renderer.setStyle(document.body, 'overflow', 'hidden');

answered Nov 12, 2024 at 11:32

Adam

397 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related