Change colour of scrollbar at anchor point?

Question

I'm creating an E-portfolio that would be viewed on either Chrome or Safari. I've already tried using the code:

$(document).ready(function(){       
            var scroll_pos = 0;
            $(document).scroll(function() { 
                scroll_pos = $(this).scrollTop();
                if(scroll_pos < 2251) {
                    $("body::-webkit-scrollbar-thumb").css('background-color', '#1E791E');
                } else {
                    $("body::-webkit-scrollbar-thumb").css('background-color', '#FF7A00');
                }
            });
        });

Have you tried styling ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb directly instead of using the body prefix? — aldavigdis, Jul 02 '14 at 09:58
Yeah, without the body prefix it doesn't change the ordinary css at all. Thanks though — user3797115, Jul 02 '14 at 10:11
If you want a "cross-browser" custom scrollbar, you should maybe use this jQuery plugin: http://jscrollpane.kelvinluck.com/ — Wissam El-Kik, Jul 02 '14 at 10:28
Basically, "How to change CSS at anchor point" ? You can google it very easily. — Claudio, Jul 02 '14 at 10:30

score 0 · Answer 1 · edited May 23 '17 at 12:05

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 create a class with the ::webkit-scrollbar pseudo-elements and use jQuery to add that class when you want to make your adjustment.

CSS

.test::-webkit-scrollbar {
       // your code here
}

jQuery

$('body').addClass('test');

Also, found this JSFiddle here

http://jsfiddle.net/promatik/wZwJz/18/

Which could be useful for you!

Solution #2: JQuery Plugin

jScrollPane - cross browser styleable scrollbars with jQuery and CSS

Change colour of scrollbar at anchor point?

1 Answers1