Set-webkit滚动条在jQuery中的可见性

我尝试通过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隐藏滚动条拇指。

您可以使用纯javascript来实现这一点：

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

要选择正确的样式表，请给它一个标题（使用

链接

或

样式

标记中的

标题

属性），然后执行以下操作：

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;");
    }
} ​

for（var i=0；i

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

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

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

然后通过从根节点（html）添加/删除类来启用/禁用它们：

---

不能使用jQuery选择伪元素。你必须找到另一种方法来解决这个问题。很高兴知道，你知道实现这一点的方法吗？你可以直接使用JS来处理文档样式规则。它工作得很好，但是有没有办法在添加类时使其消失，或者更新它？当前，添加类后，该类生效的唯一方法是滚动页面。也许可以使用js:

$（元素选择器）强制滚动。get（0）。scrollTop=0$('html').addClass('hide-scrollbar');
// now the second rule is active and the scrollbar is hidden