出现叠加层时防止背景滚动

Question

我已经使用CSS编写了自己的模态类，并在我的应用程序中成功使用了它。但是我面临的问题是当覆盖层打开时，我仍然可以滚动背景内容。打开模态/叠加时如何停止滚动背景内容？

这是我的模式，它在叠加层的顶部打开

<div>
  <div className="overlay"></div>
  {this.props.openModal ?
  <div>
    <div className="polaroid sixten allcmnt_bg_clr horiz_center2">
      {}
      <div className="mobile_header">
        <PostHeader/>
      </div>
      <div className="mobile_renderPost">
        { this.renderPostType() }
      </div>
      <div className="mobile_post_bottom"></div>
    </div>
  </div> : null}
</div>

我的叠加CSS

.overlay {
  background-color: rgba(0, 0, 0, .70);
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 1;
  left: 0;
  right: 0;
  -webkit-transition: opacity .25s ease;
  z-index: 1001;
  margin: 0 auto;
}

Answer 1

一种方法是隐藏body元素的溢出。

像这样：

body.modal-open{
    overflow:hidden;
}

因此，在这种情况下，当您弹出模态时，将一个类添加到主体，然后在关闭它时删除该类。

另一种方法是使用JavaScript禁用滚动，如下所示：

   document.documentElement.style.overflow = 'hidden';
   document.body.scroll = "no";

然后用

 document.documentElement.style.overflow = 'scroll';
 document.body.scroll = "yes";

Answer 2

我也遇到了这个问题，并尝试了将元素的高度设置body为100%or100vh和 的所有答案overflow: hidden。这给我带来了一些问题，首先是使用隐藏的溢出，使100vh页面在单击汉堡菜单按钮时跳转到顶部。

解决方案：将overflow:hidden属性添加到html。这在菜单打开的地方非常有效，防止页面滚动，并保持用户在页面上的位置而不跳转。

由于看起来您正在使用 React，因此以下是我如何使用它的示例：

.lock-scroll {
  overflow: hidden;
}

const [open, setOpen] = useState(false)
useEffect(() => {
  const html = document.getElementsByTagName('html')[0]

  if (open) {
    html.classList.add('lock-scroll')
  } else {
    html.classList.remove('lock-scroll')
  }
  return (): void => {
    html.classList.remove('lock-scroll')
  }
}, [open])

Answer 3

溢出结合：隐藏的解决方案与现代技术完美结合

html:has(dialog[open]) {
  /* remove the main scrollbar when dialog is open */
  overflow: hidden;
}

Answer 4

当您打开模态时，您可以添加 overflow: hidden;到正文的样式。

或者，

body.modal-opened {
   overflow: hidden;
}

并modal-opened在打开时将类添加到正文中，并在关闭对话框时将其删除。