How to change the color of the scrollbar by Jquery

Asked

Viewed 543 times

0

I want to change the color of the scroll bar only when the user scrolls the screen. I tried the code below but it didn’t work. How do I?

$('body').scroll(function(){
    setTimeout(function(){
        $("body::-webkit-scrollbar").css("background-color", "#333");
        console.log('fsdfs');
    },500);
});
javascript html jquery css
  • 1

    You cannot manipulate pseudo-elements ::-webkit-scrollbar using jquery

  • Use a class in the CSS .body.customScroll and with the jQuery you use $("body").addClass("customScroll")

  • Felipe, if the answer solved the problem, it is important to mark . Read the page Tour to know how the site system is. Obg!

1 answer

1


Javascript can’t change pseudo-elements, but you can create a class in CSS and add to body while scrolling:

$(window).scroll(function(){
   $("body").addClass("scroller");
});
.scroller::-webkit-scrollbar {
    width: 17px; /* largura do scroll */
}
.scroller::-webkit-scrollbar-track{
   background: #eee; /* cor do fundo */
}
.scroller::-webkit-scrollbar-thumb{
    background: blue;  /* cor do scroll */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Role a tela
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>

Browser other questions tagged javascript html jquery css

You are not signed in. Login or sign up in order to post.