【问题标题】：Disable overflow-y if modal-dialog pops up如果弹出模式对话框，禁用溢出-y
【发布时间】：2018-08-21 20:23:43
【问题描述】：

我的应用程序中有这个 CSS 属性，因为它修复了我的应用程序中的许多滚动条与错误的滚动位置有关。

html {
    overflow-y: scroll;
}

因为我将它应用到 html 并且我在模态对话框中，所以如果模态框上没有滚动条，我会滚动我的应用程序主体。如何修改该 css 属性以使其在除模态对话框之外的任何地方都可以使用？

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

我已经尝试了下面的示例（来自现有线程之一），但是当我也使用上述 css 时，它并没有涵盖我的场景。

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

【问题讨论】：

请将您的代码添加到 sn-p 中，所以有人很快解决了您的问题。
您可以尝试在 modal open 的 html 元素上删除 overflow-y: scroll; ...然后在 modal close 添加 overflow-y: scroll;再次
理论上这就是我的问题所在，如何实现这一目标

标签： html css twitter-bootstrap bootstrap-modal angular-ui-bootstrap

【解决方案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;}

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

【讨论】：

我已经尝试将 overflow:hidden 添加到 modal-dialog 或 modal-body 中，但这并没有改变 html { overflow-y: scroll; } 确实
@LazioTibijczyk 您使用的是哪个版本的 Bootstrap，能否请您就您的问题提供更多背景信息？
引导 v3.3.7
@LazioTibijczyk 然后滚动条的隐藏将自动发生。你想用你现有的代码创建一个JSBin 并显示正在发生的事情和你期望发生的事情，好吗？这将更有利于帮助您调试问题。
代码中没有什么可添加的。我正在使用 html { overflow-y: scroll; } 在我的 layout.css 中并尝试添加 .modal-dialog { overflow-y: hidden; } OR .modal-body { 溢出-y：隐藏； } 但没有任何效果。即使屏幕上有模式，我也可以滚动页面。

【解决方案2】：

使用引导事件

在modal open上删除html元素上的overflow-y: scroll; ...然后在modal close上再次添加
overflow-y: scroll;

$('#modalSelector').on('shown.bs.modal', function (e) {
  $('html').css("overflow-y", "");
})

$('#modalSelector').on('hidden.bs.modal', function (e) {
  $('html').css("overflow-y", "scroll");
})

【讨论】：