How to show the scrollbar only on scroll

882 Views Asked by TonyRandom At 03 November 2021 at 06:32

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?

Original Q&A

There are 1 best solutions below

AudioBubble On 03 November 2021 at 08:26 BEST ANSWER

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

How to show the scrollbar only on scroll

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in CUSTOM-SCROLLING

Related Questions in PERFECT-SCROLLBAR

Trending Questions

Popular # Hahtags

Popular Questions