Search code examples
javascripthtmlcsscustom-scrollingperfect-scrollbar

How to show the scrollbar only on scroll

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?

Solution

  • 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