bounty明天到期。回答此问题可获得+100声望奖励。lampshade正在寻找一个规范答案。
我试图防止在打开模态或覆盖时在后台滚动body元素,类似于Airbnb网站上实现的内容。以下是我一直使用的方法:
打开Modal
我将locked
类添加到body
或html
元素中:
html {
min-height: 100%;
}
body {
height: 100%;
margin: 0;
}
.locked {
overflow: hidden;
position: fixed;
inset: 0 0 0 0;
}
然后,我使用scrollTop
来更新CSS top
值,这将保持视图中的当前位置。
关闭模式
关闭modal后,我删除了locked
类并恢复了scrollTop
。
这种方法通常是成功的,但在iOS上有一个问题,当视图被锁定时,地址栏会重新出现,导致内容出现不和谐的跳跃。
有趣的是,Airbnb似乎已经克服了这个问题,而没有明显偏离这种方法。
如何防止移动的浏览器地址栏重现,从而消除内容跳转?
下面是打开对话框时当前状态的可视化表示:
我的目标如下:
2条答案
按热度按时间vuktfyat1#
我已经尝试过这个问题了,我相信我有一个可行的解决方案。
为了防止重新出现的地址栏弹出窗口(这似乎是问题,如果我理解你正确),我会尝试消除内容跳转(ing)。
可能修复方式:
1. CSS:尝试使用'position fixed'属性。为此,需要重新编写“.locked”类。
2. JS:这里我会(这是结合CSS在[1.])锁定滚动位置--> '窗口.scrollTo'这将导致没有任何内容跳转.
如果这仍然不清楚,我很乐意摆弄CSS和JS [脚本]并展示我的意思。
一切顺利
约纳斯
n8ghc7c12#
为了防止在打开模态或覆盖时在后台滚动body元素,您可以使用CSS和JavaScript。这里有一个你可以使用的方法:CSS方法:当模态或覆盖打开时,将以下CSS应用于body元素:body.modal-open { overflow:hidden; }此CSS规则隐藏滚动条,并防止在“modal-open”类添加到body元素时滚动body内容。
在这个例子中,当模态被显示时,“modal-open”类被添加到body元素中,当模态被隐藏时,“modal-open”类被移除。您可以根据特定的模态实现或覆盖设置调整此代码。
通过结合使用CSS方法隐藏滚动条和JavaScript方法切换“modal-open”类,可以实现在模态或覆盖打开时防止在背景内容上滚动的预期效果。
请记住调整代码以匹配模态或覆盖的实现。