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

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

webkit滚动条使用jQuery.css（）方法

3 个答案: