JSFiddle - React, Tailwind, and code Playground

HTML

<!--container high enough to scroll -->
<div class="container">

  <!-- The test results -->
<div class="results">
  <b>Scroll call counter:</b><br>
  <p><span>A) Window.scroll: </span><span id="scroll"></span></p>
  <p><span>B) Passive eventListener: </span><span id="event"></span></p>
  <p><span>c) Interval: </span><span id="interval"></span></p>
  <p><span>D) Timeout: </span><span id="timeout"></span></p>
  <p><span>E) RAF: </span><span id="raf"></span></p>
  <br><b>Lets Rock'n scroll!</b>
  </div>


  <!-- Just examples after here -->
  <div id="example1">Example using Window.scroll</div>
  <div id="example2">Example using EventListener</div>
  <div id="example3">Example using Interval</div>
  <div id="example4">Example using Timeout</div>
  <div id="example5">Example RaF</div>

<!-- container end -->
</div>

CSS

.container {
  height: 1000vh;
  background: repeating-linear-gradient(
  10deg,
  #AFCBEA,
  #AFCBEA 50px,
  #234466 50px,
  #234466 100px
);
}

.results {
  position: fixed;
  width: 50%;
  margin-left: 50%;
  margin-top: 5%;
  padding: 10px;
  transform: translateX(-50%);
  background-color: white;
  opacity: .7;
  z-index: 2;
}

#example1 {
  text-align: center;
  width: 100%;
  height: 200px;
  background-color: lightyellow;
  position: absolute;
  top: 110vh;
  box-shadow: 10px 10px 25px 0px rgba(0,0,0,1);
}

#example2 {
  text-align: center;
  width: 100%;
  height: 200px;
  background-color: lightgreen;
  position: absolute;
  top: 220vh;
  box-shadow: 10px 10px 25px 0px rgba(0,0,0,1);
}

#example3 {
  text-align: center;
  width: 100%;
  height: 200px;
  background-color: lightsalmon;
  position: absolute;
  top: 330vh;
  box-shadow: 10px 10px 25px 0px rgba(0,0,0,1);
}

#example4 {
  text-align: center;
  width: 100%;
  height: 200px;
  background-color: lightcoral;
  position: absolute;
  top: 440vh;
  box-shadow: 10px 10px 25px 0px rgba(0,0,0,1);
}

#example5 {
  text-align: center;
  width: 100%;
  height: 200px;
  background-color: steelblue;
  position: absolute;
  top: 550vh;
  box-shadow: 10px 10px 25px 0px rgba(0,0,0,1);
}


p {
  margin: 2px;
}

div, body {
  margin: 0;
}

JavaScript

/* Change these for testing different intervals/timeouts on C) and D) */
var intervaltime = 20; // for C)
var timeouttime = 20; // for D)

/* Just basic variables */
var scroll = 0;
var event = 0;
var interval = 0; var scrolling1 = false;
var timeout = 0; var waiting1 = false;
var raf = 0;
var ex1 = document.getElementById('example1');
var ex2 = document.getElementById('example2');
var ex3 = document.getElementById('example3');
var ex4 = document.getElementById('example4');
var ex5 = document.getElementById('example5');

/* The different methods: */

// 1) "classic" bad scroll funtion
  $(window).scroll( function() {
      scroll = scroll + 1;
      document.getElementById("scroll").innerHTML=scroll;
      example(ex1);
  });


// 2) With event listener
  window.addEventListener('scroll', onScroll, true);
  function onScroll() {
      event = event + 1;
      document.getElementById("event").innerHTML=event;
      example(ex2);
  }


// 3) with interval
// from https://benmarshall.me/quit-attaching-javascript-handlers-to-scroll-events/
$(window).scroll( function() {
  scrolling1 = true;
});
setInterval( function() {
    if (scrolling1) {
      scrolling1 = false;
        interval = interval + 1;
         document.getElementById("interval").innerHTML=interval + ' @' + intervaltime + 'ms';
         example(ex3);
    }
  }, intervaltime );

// 4) with timeout
// from: http://joji.me/en-us/blog/how-to-develop-high-performance-onscroll-event
var scroll5 = function () {
    timeout = timeout + 1;
    document.getElementById("timeout").innerHTML=timeout + ' @' + timeouttime + 'ms';
    example(ex4);
};
$(window).scroll(function () {
    if (waiting1) {
        return;
    }
    waiting1 = true;
    scroll5();

    setTimeout(function () {
        waiting1 = false;
    }, timeouttime );
});

// 5) RAF
// from: https://gist.github.com/paulmillr/3118943 and/or https://developer.mozilla.org/en-US/docs/Web/Events/scroll
(function() {
  var lastScrollY = 0;
  var ticking =...