How to show the scrollbar only on scroll

I use perfect-scrollbar for custom scrollbar. The scrollbar is visible only when you mouse hover the container.

How can I show the bar only on scroll event and hide it on scroll end?


Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You can try using the javascript onscroll() function. Try something like this-


<body onscroll="bodyScroll();">

  <script language="javascript">
    var scrollTimer = -1;

    function bodyScroll() { = "white";

      if (scrollTimer != -1)

      scrollTimer = window.setTimeout("scrollFinished()", 500);

    function scrollFinished() { = "red";

  <div style="height:2000px;">
    Scroll the page down. The page will turn red when the scrolling has finished.



This code is from another stack question- How do I know when I’ve stopped scrolling?

Link to onscroll() event in js-

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x