我尝试通过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 隐藏滚动条拇指。
你不能用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
你可以使用纯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;");
}
}