html - 如果弹出模态对话框，则禁用 overflow-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让它按照你想要的方式工作。我在 Bootstrap 2 中结合使用了 jQuery 和 CSS 来实现这一点，当模式打开时，它并不总是删除 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;}

希望这能给您一个起点。 :)