在角度应用程序中打开模式时防止 BODY 滚动答案

【问题标题】：Prevent BODY from scrolling when a modal is opened in angular application在角度应用程序中打开模式时防止 BODY 滚动
【发布时间】：2020-08-11 07:30:03
【问题描述】：

当我尝试打开弹出模式时，我希望我的身体停止滚动到顶部。我同时使用 angular material 和 ng-bootstrap popup modals。

我已经尝试了下面这段 CSS 代码，但问题仍然存在，请帮助。

body.modal-open {
  overflow: hidden;
  position: fixed;
}

【问题讨论】：

我确定模态默认情况下会阻止正文滚动。您必须有一些覆盖它的代码。请提供您的代码吗？
请查看css-tricks.com/prevent-page-scrolling-when-a-modal-is-open
这是一个极端情况。请提供您的代码，否则我们将无法为您提供帮助。

标签： javascript css angular angular-material bootstrap-modal

【解决方案1】：

从我在这里读到的here 模态的位置设置为顶部的默认值。要完全移除滚动，请使用它来向下定位模式。如果您只想在模态关闭后处于同一位置，您可以使用我在 cmets 中使用的这个：here

  openModal() {
    // Remember the current scroll position
    let pos = (document.documentElement.scrollTop || document.body.scrollTop);
    this.bsModalRef = this.modalService.show(ModalComponent);
     this.modalHideSubscription = this.modalService.onHide.subscribe(() => {
      //Return back to the position before opening modal
      window.scrollTo(0,pos);
      this.modalHideSubscription.unsubscribe();
    });
  }

【讨论】：