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”类，可以实现在模态或覆盖打开时防止在背景内容上滚动的预期效果。
请记住调整代码以匹配模态或覆盖的实现。