时间戳

首页 > 解决方案 > 如何仅在滚动时显示滚动条

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

问题描述

我使用完美滚动条https://github.com/mdbootstrap/perfect-scrollbar自定义滚动条。只有当您将鼠标悬停在容器上时，滚动条才可见。

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

标签： javascripthtmlcsscustom-scrollingperfect-scrollbar

解决方案

您可以尝试使用 javascriptonscroll()函数。试试这样的 -

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

此代码来自另一个堆栈问题- 我如何知道何时停止滚动？

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

推荐阅读