afewscroll

by s_kuma

HTML

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
</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;
  let time = null;
  
  function cnt()  {
  	clearTimeout(time);
    time = setTimeout(function(){
    	i++;
      let text = document.getElementById("count");
      text.innerHTML = i ;
    },SPEED);
  }
  
  window.addEventListener("scroll" , cnt,{passive: true});
</script>
</html>