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

Question

场景：

• 我正在尝试使用垫式抽屉，如模态侧板。

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

  有没有一种方法可以使抽屉打开时禁用滚动并且滚动条消失？

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

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

Answer 1

我不知道为什么在div中需要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属性。）