How to show the scrollbar only on scroll

Question

I use perfect-scrollbar https://github.com/mdbootstrap/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?

score 0 · Accepted Answer · 2021-11-03T08:38:46.053

0

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

<html>

<body onscroll="bodyScroll();">

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

    function bodyScroll() {
      document.body.style.backgroundColor = "white";

      if (scrollTimer != -1)
        clearTimeout(scrollTimer);

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

    function scrollFinished() {
      document.body.style.backgroundColor = "red";
    }
  </script>

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

</body>

</html>

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

Link to onscroll() event in js- https://www.w3schools.com/jsref/event_onscroll.asp

edited Nov 03 '21 at 08:38

answered Nov 03 '21 at 08:26

Thank you. But how can I hide scrollbar after scroll event ends? – TonyRandom Nov 03 '21 at 08:32
I am editing the answer and adding the code. – Nov 03 '21 at 08:36
You can try any one of the answers from the other question. – Nov 03 '21 at 08:41

How to show the scrollbar only on scroll

1 Answers1