webkit scrollbar using jQuery.css() method

Question

::-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

SLaks · Accepted Answer · 2013-03-05 19:56:13Z

2

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.

answered Mar 5, 2013 at 19:56

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Przemysław Banaszek Over a year ago

ok, but loading stylesheet will overwrite my existing css properties </br> $('#container').append('<link rel="stylesheet" href="style2.css" type="text/css" />');

SLaks Over a year ago

@PrzemysławBanaszek: Wrong.

nhahtdh · Accepted Answer · 2013-05-01 18:14:38Z

1

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

edited May 1, 2013 at 18:14

nhahtdh

56.9k15 gold badges131 silver badges164 bronze badges

answered May 1, 2013 at 18:09

ashack

1,19212 silver badges17 bronze badges

Comments

Danial · Accepted Answer · 2016-09-04 18:17:39Z

1

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.

answered Sep 4, 2016 at 18:17

Danial

1,62616 silver badges16 bronze badges

Collectives™ on Stack Overflow

webkit scrollbar using jQuery.css() method

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related