在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;
}

我无法通过隐藏溢出禁用滚动,因为我仍然需要启用滚动,我只需要通过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

Answer 2

您可以使用纯 JavaScript 来执行此操作：

document.styleSheets[2].addRule("::-webkit-scrollbar-thumb", "visibility: hidden;");

为了能够选择正确的样式表，给它一个标题（使用title您的link或style标签中的属性），然后执行以下操作：

for(var i = 0; i < document.styleSheets.length; i ++) {
    var cursheet = document.styleSheets[i];
    if(cursheet.title == 'mystylesheet') {
        cursheet.addRule("::-webkit-scrollbar-thumb", "visibility: hidden;");
    }
} ?