Editing a scroll bar using jQuery

Question

I want to change the color of a scrollbar thumb, which I know can be done using ::-webkit-scrollbar-track { } in CSS, but in this case the color has to come through from a spreadsheet which I'm using JS to access.

I can't use anything other than plain JS or jQuery (no other libraries). Is there a way of doing this? Ideally something like this (I know this is wrong):

$('::-webkit-scrollbar-track').css({
    'background': /* data pulled in */
});

Possible duplicate of [Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery](http://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin) — hsz, Mar 16 '17 at 12:24

score 2 · Accepted Answer · answered Mar 16 '17 at 12:25

2

jQuery's css function is used for elements. ::-webkit-scrollbar is a pseudo selector. However you can do something like this:

$(function() {
   $('<style>::-webkit-scrollbar-track { }</style>').appendTo('body');
});

answered Mar 16 '17 at 12:25

mehulmpt

15,861
12
48
88

Editing a scroll bar using jQuery

1 Answers1