如何在Angular中使用overflow:hidden只显示一页？

Question

我想让我的窗格不可滚动。如果我将元素设置为溢出：隐藏，我将无法在任何页面上滚动，因此我尝试在我想要不可滚动的组件的 CSS 文件中执行此操作。然而，我实现这一目标的唯一方法是将不可滚动的类名添加到 index.html 的元素中。

.unscrollable{
    overflow: hidden;
}

但是，在这种情况下，无论我在页面上导航什么位置，所有窗口都不可滚动。

我尝试通过仅将以下内容添加到组件的 CSS 文件中来解决该问题：

.unscrollable{
    overflow: hidden !important;
}

但无济于事。

有人知道如何解决这个问题吗？我很困惑无法根据组件影响index.html，特别是因为标签在那里。

Answer 1

这可以通过使用 angular 的 Renderer2

来完成

您可以使用此组件将溢出隐藏的 CSS 添加到文档的正文中。

像这样导入

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

然后在构造函数中声明

constructor(private _renderer: Renderer2)

然后在 ngOnInit() 上使用它

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

这将向正文添加隐藏的溢出，并且页面将不可滚动。

然后确保删除该组件销毁时隐藏在主体中的溢出，使用 ngOnDestroy() 来做到这一点

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

Answer 2

您可以像这样使窗口大小的 div 不可滚动：

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

Answer 3

类似的东西

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

并添加

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