JSFiddle - React, Tailwind, and code Playground

by godsenal

HTML

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
<div class="container">
  <div class="header">
    Throttle
  </div>
  <div id="tScroll" class="scroll">
    <div class="content">

    </div>
  </div>
  <div id="tCount" class="count">0</div>
</div>
<div class="container">
  <div class="header">
    Debounce
  </div>
  <div id="dScroll" class="scroll">
    <div class="content">

    </div>
  </div>
  <div id="dCount" class="count">0</div>
</div>

CSS

.container {
  position: relative;
  display: inline-block;
  border: 1px solid black;
  width: 200px;
}

.scroll {
  height: 200px;
  overflow-y: scroll;
}

.count {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
}

.content {
  height: 3000px;
}

JavaScript

const tScroll = document.getElementById('tScroll');
const dScroll = document.getElementById('dScroll');

const tCount = document.getElementById('tCount');
const dCount = document.getElementById('dCount');

tScroll.addEventListener('scroll', _.throttle(() => tCount.innerText = parseInt(tCount.innerText) + 1, 500));
dScroll.addEventListener('scroll', _.debounce(() => dCount.innerText = parseInt(dCount.innerText) + 1, 500));