jquery - 使用 jQuery.css() 方法的 webkit 滚动条

Question

而不是这个： source_of_example

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

我想做这样的事情：

var cssObject = {
'::webkit-scrollbar':{
    'width':'12'
},
'::webkit-scrollbar-track':{
    '-webkit-box-shadow':'inset 0 0 6px rgba(0,0,0,0.3)','border-radius':'10'
},
'::webkit-scrollbar-thumb':{
    'border-radius':'10px','-webkit-box-shadow':'inset 0 0 6px rgba(0,0,0,0.5)'
    }
}
$("#container").css(cssObject);

但由于某种原因它不起作用:)，请帮忙

Answer 1

该.css()方法将 CSS属性应用于元素。

::webkit-scrollbar-*是选择伪元素的 CSS选择器。
jQuery 没有任何与伪元素交互的方法。

相反，您可以构建自己的样式表。

Answer 2

::webkit-scrollbar使用伪元素创建一个类，并在您想要进行调整时使用 jQuery 添加该类。

CSS

&.ipad-width::-webkit-scrollbar {
       width: 30px;
}

jQuery

$('ul.scrolling-ul').addClass('ipad-width');

Answer 3

请注意：您确实需要启动全局选择器的使用，否则这些类似乎不起作用。我正在使用

::-webkit-scrollbar {
    width: 0px;
}
.scrollbar.overflow::webkit-scrollbar {
    width: 30px;
}

使比通常更宽的滚动条仅在元素溢出时出现。如果没有初始设置，则会出现默认滚动条，并且该类没有任何效果。