角度材料：打开垫子抽屉时如何隐藏窗口滚动条？答案

【问题标题】：Angular material: How to hide window scrollbar when mat-drawer is open?角度材料：打开垫子抽屉时如何隐藏窗口滚动条？
【发布时间】：2019-03-23 14:34:39
【问题描述】：

场景：

我正在尝试使用像模态边页这样的垫子抽屉。
因此，当抽屉打开时，我不希望用户能够与侧页之外的任何内容进行交互。这意味着我不希望用户能够在侧页打开时滚动窗口。

有没有办法让它在抽屉打开时禁用滚动并且滚动条消失？

Here 是一个演示问题的示例。请注意，当抽屉打开时，页面的滚动条仍然存在，您可以滚动窗口以及抽屉内容。

如何让这个滚动条消失，让用户只能与抽屉的内容进行交互？

【问题讨论】：

为什么你的应用嵌套在一个2000px高的div？
滚动条出现
@phelhe 我已经包含了我的解决方案。它适用于我的演示。让我知道它是否适用于您的应用！

标签： css angular angular-material angular-material2

【解决方案1】：

我不知道为什么在大火中你的 div 需要有 2000 像素的高度，但无论如何，这里有一种解决方法。

在您的 app.component.css 上，添加以下 CSS 属性 overflow: auto 和 overscroll-behavior-y: contain 以防止滚动行为“逃离”您的垫子抽屉。

在某种程度上，我们可以说这在抽屉的滚动上下文和主应用程序之间创建了一个逻辑分离。

.drawer-content {
  height: 100vh;
  width: 300px;
  background: orange;
  overflow-y: auto;
  padding-left: 20px;

  overflow: auto;
  overscroll-behavior-y: contain;
}

我已经通过here 复制了演示。（我没有修改其他类和 CSS 属性。）

【讨论】：