afewscroll

throttle

by s_kuma

HTML

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
</head>
<style type="text/css">
  .container {
    height: 100vh;
    font-size: 3em;
    text-align: center;
  }
  #count {
    position: fixed;
    top: 0;
    left 0;
    height: 50px;
    width: 50px;
    background: #444;
    color: #ddd;
    text-align: center;
  }
</style>
<body>
  <div id="count"></div>
  <div class="container" style="background:#eaeaff">スクロールしてみて</div>
  <div class="container" style="background:#eaffea"></div>
  <div class="container" style="background:#ffeaea"></div>
  <div class="container" style="background:#f4eaff"></div>
  <div class="container" style="background:#eafff4"></div>
</body>
<script type="text/javascript">
	let i =0;
  const SPEED = 100;
 
  function cnt()  {
    	i++;
      let text = document.getElementById("count");
      text.innerHTML = i ;
  }
  
  window.addEventListener("scroll" , _.throttle(cnt,SPEED),{passive: true});
</script>
</html>