显示jQuery确认对话框时，滚动条消失

Question

当显示jquery确认对话框时，页面上的滚动条消失，这将导致页面跳到右侧。 对话的JavaScript代码如下：

<script src="vendor/jquery-confirm.min.js"></script>
<link href="vendor/jquery-confirm.min.css" rel="stylesheet" type="text/css">
<script>
    function confirmDialog(content, func, parameter) {
        $.confirm({
            title: "",
            content: content,
            confirmButton: "Yes",
            cancelButton: "No",
            theme: "black",
            confirm: function() { func(parameter); },
            cancel: function() { }
        });
    }
</script>

我正在使用CSS：

body {
    overflow-y: scroll;
}

如何防止这种情况发生？

更新资料

我尝试添加“重要”，但是在Firefox中检查页面时，我看到有以下CSS：

body.jconfirm-noscroll {
    overflow: hidden !important;
}

并且有一行通过：

overflow-y: scroll !important;

Answer 1

CSS是数学。 每个选择器都归结为一个特异性数。 如果数字相等，则最后一个数字适用。 如果它们不相等，则以最高者为准，与顺序无关。

您可以尝试使用特异性计算器之类的工具将选择器链接到特定数字，但是实际上，您不需要这样做。

总的来说是：

!important > style="inline rules" > #id > .class > attribute = element

您要覆盖的选择器是：

body.jconfirm-noscroll {
   some rule !important;
}

这意味着!important + 1 x class + 1 x element 。 只要您的选择器在页面中位于较低位置（稍后由浏览器解析），就可以使用相同的选择器覆盖它。

或者，请确保可以使用

html body.jconfirm-noscroll {
  some rule !important;
}

或者，当然，如果您知道身上有其他任何类，请将其添加到选择器中。 或在<body>上放置#id并使用它。 它将击败.class 。 但是您不能用body !important击败body.class !important body !important 。 可以肯定的。

重要说明：在某些情况下，您绝对可以确定选择器是否更强大，但仍然拒绝应用。 不要失望。 这发生在我们所有人身上。 根据经验，在以下任何一种情况下，它都会下降：

您在上一条规则中遇到语法错误，该规则会禁用您当前正在查看的规则（检查未闭合的花括号）
一个更强大的选择器适用。 请注意，内联样式（放置在元素的style属性中）实际上比#id更强。 这就是通常通过javascript应用样式的原因。 它们不会覆盖!important ，尽管
您的标记被完全破坏了。 在极少数情况下，当您的标记无效时，css将不适用，因为您正在查看的元素不是您认为对浏览器适用的元素。 我说的是嵌套<a>标签和类似标签的情况
如果以上帮助均不存在，请仔细检查选择器。 逐步检查是否符合标记要求。 确保它在应该有的地方有空格，在不应该有的地方没有空格。 我被（某些人）认为是CSS专家，但是您会为我编写错误的选择器次数感到惊讶，并且花了我一两分钟的时间才能发现错字。 我想这与人性有关。

Answer 2

覆盖CSS可能很棘手...

你可以试试

body, body.jconfirm-noscroll {
    overflow: auto!important;
}

但这可能仍然行不通...

如果没有，请向您的身体添加一个类，例如<body class"please-scroll">并尝试

body.please-scroll, body.please-scroll.jconfirm-noscroll {
    overflow: auto!important;
}

我不确定是否可以使用，请尝试并让我知道，我很感兴趣！

显示jQuery确认对话框时，滚动条消失

问题描述

2 个解决方案

解决方案1
3 已采纳 2017-06-07 19:39:22

解决方案2
1 2017-06-07 19:26:38

显示jQuery确认对话框时，滚动条消失

问题描述

2 个解决方案

解决方案1 3 已采纳 2017-06-07 19:39:22

解决方案2 1 2017-06-07 19:26:38

解决方案1
3 已采纳 2017-06-07 19:39:22

解决方案2
1 2017-06-07 19:26:38