HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>idle badge</title>
  <style>
    #badge {
      position: sticky; top: 0; padding: 8px 12px;
      background: #eee; border-bottom: 1px solid #ccc;
    }
    #badge[data-state="busy"] { background: #ffe8a3; }
    #badge[data-state="idle"] { background: #d8f5d0; }
    .tall { height: 1800px; padding: 16px; }
  </style>
</head>
<body>
  <div id="badge" data-state="idle">idle</div>
  <div class="tall">Scroll to toggle busy / idle</div>
  <script>
    var badge = document.getElementById("badge");
    document.addEventListener(
      "scroll",
      function () {
        badge.textContent = "scrolling…";
        badge.dataset.state = "busy";
      },
      { passive: true }
    );
    if ("onscrollend" in document) {
      document.addEventListener("scrollend", function () {
        badge.textContent = "idle";
        badge.dataset.state = "idle";
      });
    } else {
      var t;
      document.addEventListener(
        "scroll",
        function () {
          clearTimeout(t);
          t = setTimeout(function () {
            badge.textContent = "idle (fallback)";
            badge.dataset.state = "idle";
          }, 150);
        },
        { passive: true }
      );
    }
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Document scrollend — idle badge (Try It)