在 Internet Explorer 中显示滚动条以忽略 class

Question

在 Internet Explorer 和 Edge 中，我试图隐藏溢出元素上的所有滚动条，具有特定 class:

的元素除外

*:not(.ignore-scrollbar-rule) {
    -ms-overflow-style: none;
}

但是，我无法应用此规则，即使在带有 class ignore-scrollbar-rule 的元素上，滚动条也是隐藏的。在 IE/Edge 中忽略此规则是否有原因？

这是一个JS Fiddle

Answer 1

嗯，问题似乎是规则也适用于内部元素（因为它应该是因为你将它分配给所有元素）并且由于某种原因属性然后冒泡，或者在Edge 错误解释最少。对我来说似乎是个错误。您可以通过仅选择外部类、like so.

来绕过它

.outer:not(.ignore-scrollbar-rule) {
    -ms-overflow-style: none;
}

Answer 2

要在 Internet Explorer 中执行此操作，您不能使用 :not(...)。您需要有两个单独的选择器。一个针对所有内容，另一个针对一个 (className)。

* {
    -ms-overflow-style: none;
}

.ignore-scrollbar-rule {
    -ms-overflow-style: auto;
}

现在 .ignore-scrollbar-rule 规则可以应用于您想要独立于其层次结构的任何元素。

Show scroll bar in Internet Explorer for ignored class