如何仅在滚动时显示滚动条

Question

我使用 perfect-scrollbar https://github.com/mdbootstrap/perfect-scrollbar 来自定义滚动条。滚动条仅在鼠标悬停在容器上时可见。

如何只在滚动事件时显示栏并在滚动结束时隐藏它？

Answer 1

您可以尝试使用 javascript onscroll() 功能。尝试这样的事情-

<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>

此代码来自另一个堆栈问题- How do I know when I've stopped scrolling?

Link 到 js 中的 onscroll() 事件- https://www.w3schools.com/jsref/event_onscroll.asp

如何仅在滚动时显示滚动条

How to show the scrollbar only on scroll

html

javascript

css

custom-scrolling

perfect-scrollbar