Javascript 当覆盖显示时防止背景滚动_Javascript_Html_Css_Scroll_Overlay

Javascript 当覆盖显示时防止背景滚动

javascript html css scroll

Javascript 当覆盖显示时防止背景滚动,javascript,html,css,scroll,overlay,Javascript,Html,Css,Scroll,Overlay,我已经使用css编写了自己的模态类，并在我的应用程序中成功地使用了它。然而，我面临的问题是，当覆盖打开时，我仍然可以滚动背景内容。当模式/覆盖打开时，如何停止滚动背景内容这是我的模态，它在覆盖层顶部打开 <div> <div className="overlay"></div> {this.props.openModal ? <div> <div className="polaroid sixten allcmnt_bg

我已经使用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>

打开模式时，可以添加

overflow:hidden到主体的样式
或者
并在打开时将模态打开的
类添加到主体中，在关闭对话框时将其删除。
一种方法是隐藏主体元素的溢出
像这样：
body.modal-open{
    overflow:hidden;
}

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

所以在这种情况下，当您弹出模态时，您将一个类添加到主体中，然后当您关闭它时，您将删除该类
另一种方法是使用javascript禁用滚动，如下所示：
body.modal-open{
    overflow:hidden;
}

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

然后将其与
 document.documentElement.style.overflow = 'scroll';
 document.body.scroll = "yes";

模式打开时，隐藏主体上的x/y滚动条
.no-scroll {
    overflow: hidden;
}

使用JavaScript将类添加到主体中：
<body class="no-scroll">

</body>



关闭模式后，删除该类。
使用JavaScript将类添加到具有
overflow:hidden;

在大多数情况下都能正常工作，但我相信iPhone上的Safari仍然会因为触摸移动而有轻微的抖动，需要类似的东西
function handleTouchMove(e)
{
  e.preventDefault();
}
function lockscreen()
{
  var body = document.getElementById("body");
  body.className += " lock-screen";
  body.addEventListener('touchmove', handleTouchMove, false);
}
function unlock()
{
  var body = document.getElementById("body");
 body.classList.remove("lock-screen");
 body.removeEventListener('touchmove', handleTouchMove);
}

要阻止用户继续滚动
简易智能方式Good的可能副本，我相信这在iPhone上的safari中有问题，应该是document.body
document.getElementById（“body”）
将无法工作，除非您的
元素具有id=“body”
@MRSafari在body上的“滚动”有效？我想我没有在HTML5规范中找到它。@Ethan事实上它没有添加滚动属性。它的溢出属性。但是我不知道为什么他们在js属性中称之为scoll。