CODEWITHSUNDEEP
jquerycsswebkitscrollbar
Przemysław Banaszek
Przemysław Banaszek

Reputation: 838

webkit scrollbar using jQuery.css() method

instead of this: 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); 
}

I want to do something like this:

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

but for some reason it does not work :), please help

Upvotes: 0

Views: 3444

Answers (3)

Danial
Danial

Reputation: 1614

Just a note on this: You DO need to initiate the use of the global selector, otherwise the classes don't seem to work. I'm using

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

to make wider than usual scrollbars appear only when the element is overflowed. Without the initial setting the default scrollbars appear and the class doesn't have any effect.

Upvotes: 1

ashack
ashack

Reputation: 1202

Create a class with the ::webkit-scrollbar pseudo-elements and use jQuery to add that class when you want to make your adjustment.

CSS

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

jQuery

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

Upvotes: 1

SLaks
SLaks

Reputation: 887469

The .css() method applies CSS properties to an element.

::webkit-scrollbar-* are CSS selectors that select pseudo-elements.
jQuery does not have any methods that interact with pseudo-elements.

Instead, you can build your own stylesheet.

Upvotes: 2

Related Questions