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是数学。每个选择器归结为特异性数字。如果数字相等，则应用最后一个。如果它们不相等，则无论订单如何，最高都适用。

您可以尝试使用specificity calculator等工具将选择器与特定数字相关联，但实际上，您并不需要。

一般要点是：

Main.main.callMe();

您尝试覆盖的选择器是：

!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; }上加#id并使用它。它将击败<body>。但是你不能用.class击败body.class !important。这是肯定的。

重要说明： 有些情况下您绝对肯定您的选择器更强，但仍然拒绝申请。不要绝望。它发生在我们所有人身上。根据经验，它在任何一种情况下都会失败：

您之前的规则中存在语法错误，该错误会禁用您当前正在查看的那个（检查未关闭的大括号）
适用更强的选择器。请注意，内联样式（放置在元素的body !important属性中）实际上强于style s。这就是为什么通过#id应用的样式通常适用的原因。他们不会覆盖javascript，但
你的标记完全被破坏了。在极少数情况下，当您的标记无效时，css不适用，因为您正在查看的元素不是您认为它们适用于浏览器的元素。我正在谈论嵌套!important标签和类似
如果以上都没有帮助，请仔细检查您的选择器。逐步检查标记。确保它有应有的空间，并且没有它应该具有的位置。我（有些人）认为是一位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 个答案: