设置-webkit-滚动条拇指的知名度jQuery的

我试图通过jQuery像这样设置滚动条拇指的可见性：设置-webkit-滚动条拇指的知名度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滚动条拇指。

来源

2012-09-23 Spencer Sharkey

你不能用jQuery选择伪元素。你必须找到另一种解决方法。 – BoltClock

嗯，这是很好的知道，你会知道一种方法来实现这一点？ –

你可以直接使用JS混淆文档样式规则。 – BoltClock

您无法使用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

来源

2012-09-23 19:12:19

它的工作原理很完美，但是有没有一种方法可以在课程添加时使它消失，或者是一种更新方法？目前，添加该类后，其生效的唯一方法是滚动页面。 –

也许你可以用js强制滚动：'$（element-selector）.get（0）.scrollTop = 0;' –

我试过了，它没有效果。它仍然只会在您将某种输入应用到窗口时更新。 –

您可以使用纯JavaScript来做到这一点：

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

为了能够选择合适的样式，给它一个标题（使用您的link或style标签title属性），然后执行：

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

来源

2012-09-23 19:08:27 Chris

设置-webkit-滚动条拇指的知名度jQuery的

回答

相关问题