出现叠加时防止背景滚动

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了出现叠加时防止背景滚动相关的知识,希望对你有一定的参考价值。

我已经使用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;
}
答案

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

像这样:

body.modal-open{
    overflow:hidden;
}

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

另一种方法是使用javascript来禁用滚动,如下所示:

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

然后用它返回

 document.documentElement.style.overflow = 'scroll';
 document.body.scroll = "yes";
另一答案

打开模态时,可以将overflow: hidden;添加到主体的样式中。

要么,

body.modal-opened {
   overflow: hidden;
}

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

另一答案

打开模态时,隐藏正文上的x / y滚动条。

.no-scroll {
    overflow: hidden;
}

使用JavaScript将类添加到正文:

<body class="no-scroll">

</body>

关闭模态后,删除该类。

另一答案

使用JavaScript将类添加到正文中

overflow:hidden;

在大多数情况下都可以使用,但我相信iPhone上的Safari仍会因Touch Move而略微滚动,因此需要这样的东西。

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);
}

阻止用户滚动

以上是关于出现叠加时防止背景滚动的主要内容,如果未能解决你的问题,请参考以下文章

Android在滚动时修复了滚动视图中的背景图像

炫酷 CSS 背景效果的 10 个代码片段

如何在 MS Word 文档中显示代码片段,因为它在 *** 中显示(滚动条和灰色背景)

如何防止表格视图滚动到视图后面?

如何防止 QTabWidget 滚动按钮获得焦点?

使用导航控制器按下后退按钮后,如何防止先前的片段出现?