HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>throttled scroll</title>
  <style>
    body { font-family: sans-serif; padding: 16px; margin: 0; }
    #panel { height: 140px; overflow: auto; border: 2px solid #0d9488; border-radius: 8px; padding: 10px; margin-bottom: 12px; }
    #stats { font-size: 14px; color: #475569; }
    #stats strong { color: #0f766e; }
    .block { height: 80px; background: #ccfbf1; margin-bottom: 8px; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #115e59; font-weight: 600; }
  </style>
</head>
<body>
  <div id="panel">
    <div class="block">Block 1</div>
    <div class="block">Block 2</div>
    <div class="block">Block 3</div>
    <div class="block">Block 4</div>
    <div class="block">Block 5</div>
  </div>
  <div id="stats">Raw scroll events: <span id="raw">0</span> · Throttled runs: <strong id="th">0</strong></div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    var raw = 0, th = 0, last = 0;
    $("#panel").on("scroll", function() {
      raw++;
      $("#raw").text(raw);
      var now = Date.now();
      if (now - last >= 150) {
        last = now;
        th++;
        $("#th").text(th);
      }
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery scroll event — throttled handler (Try It)