如何覆盖“::-webkit-scrollbar”CSS规则并使滚动条再次可见

Question

我使用以下规则使滚动条不可见：

::-webkit-scrollbar { display: none; }

如何覆盖此规则以使滚动条再次可见？我尝试了以下方法：

::-webkit-scrollbar { display: initial; }

在这种情况下，滚动条保留其空间，但拇指不可见。

请参阅此处的简短演示。

Answer 1

尝试

::-webkit-scrollbar { 可见性：隐藏； }

和

::-webkit-scrollbar { 可见性：可见； }

编辑：

不过，这会保留空间......所以，添加“宽度：0！重要;”

Answer 2

过了一会儿，我想隐藏我的

.horizontal-scroll

类的滚动条。这对我有用：

之前：

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #f4f7f5;
}

::-webkit-scrollbar {
    width: 10px;
    background-color: #f4f7f5;
}

::-webkit-scrollbar-thumb {
    background-color: #222823;
}

.horizontal-scroll::-webkit-scrollbar {
    display: none !important;
}

之后：

html::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #f4f7f5;
}

html:has(.horizontal-scroll)::-webkit-scrollbar {
    display: none !important;
}

html::-webkit-scrollbar {
    width: 10px;
    background-color: #f4f7f5;
}

html::-webkit-scrollbar-thumb {
    background-color: #222823;
}