我已经用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;
}
7条答案
按热度按时间q9rjltbz1#
一种方法是隐藏body元素的溢出。
就像这样:
所以在这种情况下,当你弹出模态时,你会在主体中添加一个类,然后当你关闭它时,你会删除这个类。
另一种方法是使用JavaScript来禁用滚动,如下所示:
然后返回
olqngx592#
当你打开模态,你可以添加
overflow: hidden;
到身体的样式。或者,
并在打开时将
modal-opened
类添加到正文中,在关闭对话框时删除。g6baxovj3#
使用JavaScript将类添加到正文中
将工作在大多数情况下,但我相信Safari在iPhone上仍然会滚动轻微抖动,由于触摸移动和类似的东西将需要。
停止用户继续滚动
1tu0hz3e4#
我也遇到了这个问题,尝试了各种方法,从将
body
元素的高度设置为100%
或100vh
和overflow: hidden
。这给我带来了一些问题,首先是使用100vh
的隐藏溢出,使页面在单击汉堡菜单按钮时跳到顶部。解决方案:将
overflow:hidden
属性添加到html
标记中。这在菜单打开的地方非常有效,可以防止页面滚动,并且用户可以保持在页面上的位置而不会跳转。因为看起来您使用的是React,下面是我如何使用它的一个示例:
第一个
zbdgwd5y5#
当模态打开时,隐藏主体上的x/y滚动条。
使用JavaScript将类添加到主体:
关闭模态后,删除该类。
bmp9r5qi6#
到目前为止(2022年10月)的所有答案都建议在打开模式/弹出窗口时动态地将
overflow: hidden
添加到'body'或'html'中。如果'html'或'body'实际上是滚动元素,这将起作用,并修复position: fixed
元素的有些违反直觉的过度滚动行为。我尝试使用overscroll-behavior来解决这个问题,这可以工作,但需要在你的模态内滚动元素(实际溢出),如果用户只是决定触摸你的覆盖层以外的“锁定”元素,这不是很可靠。
根据您的页面设计,还有另一个选项需要您拆分内容和覆盖,将'html'和'body'高度显式设置为100%。下面是一个完整的示例:
最重要的部分是最后一个CSS条目,这将使您的
.content
元素成为主滚动元素:但是这种方法也有一个缺点,大多数移动的浏览器都不能通过滚动来自动隐藏它们的URL栏,因为这似乎依赖于
html
或body
元素的滚动:-(.yxyvkwin7#
将overflow: hidden solution与现代技术完美结合