css - Angular Material : How to hide window scrollbar when mat-drawer is open?

Question

场景:

• 我正在尝试使用垫抽屉作为模态侧页。

• 因此，当抽屉打开时，我不希望用户能够与 sidesheet 之外的任何内容进行交互。这意味着我不希望用户在侧页打开时能够滚动窗口。

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

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

• 如何使滚动条消失，以便用户只能与抽屉的内容进行交互？

Answer 1

我不知道为什么在 blazes 中你的 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 属性。)