jquery - 在 jQuery 中设置 -webkit-scrollbar-thumb 可见性

Question

我尝试像这样通过 jquery 设置滚动条缩略图的可见性:

$('-webkit-scrollbar-thumb').css('visibility', 'hidden')

但它实际上并没有做任何事情。这是我的 CSS 定义:

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    background: rgba(150, 150, 150, 0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    border-radius: 2;
    margin: 5px;
}

我不能通过 overflow hidden 来禁用滚动，因为我仍然需要启用滚动，我只需要通过 javascript 隐藏滚动条缩略图。

Answer 1

不能用 jQuery 查询 html 伪元素。
您需要为此类规则使用变通方法:在 css 中指定 2 个不同的规则:

/*normal*/
::-webkit-scrollbar-thumb {
    /*...*/
}

/*hidden*/
.hide-scrollbar ::-webkit-scrollbar-thumb{
    visibility : hidden;
}

然后通过从根节点 (html) 添加/删除类来启用/禁用它们:

$('html').addClass('hide-scrollbar');
// now the second rule is active and the scrollbar is hidden