如果弹出模式对话框，则禁用溢出y

Question

我的应用程序中具有此CSS属性，因为它修复了我的应用程序中的许多滚动条，以解决错误的滚动位置。

html {
    overflow-y: scroll;
}

因为我将其应用于html，并且位于模态对话框中，所以如果模态上没有滚动条，则可以滚动应用程序的主体。如何修改css属性以在除模式对话框之外的所有位置使用？

如果模式对话框中有滚动条，则它工作正常，因为它使用了正确的滚动条，但是当没有滚动条时，我只是在滚动其背景。

我已经尝试了以下示例（从现有线程之一开始），但是当我也使用上述CSS时，它并没有涵盖我的情况。

.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    height: 250px;
    overflow-y: auto;
}

Answer 1

如果您使用的是Bootstrap之类的框架，则可以使用Modal Events使其按需工作。我已经使用jQuery和CSS的组合在Bootstrap 2中实现了这一点，当模式打开时，Bootstrap 2并不总是删除body的滚动条。

$('#modal-id').on('hidden', function () {
    $("body").removeClass("model-open");
}).on('show', function () {
    $("body").addClass("model-open");
});

我在hidden和show上使用了以上两个事件。而且我还将类添加到body中，在您的情况下，它将是html。

.model-open {overflow: hidden;}

希望这为您提供了一个起点。 :)

Answer 2

使用引导事件

在模式打开上的overflow-y: scroll;元素上删除html，然后在模式关闭上添加
{{1} }

overflow-y: scroll;