JSFiddle - React, Tailwind, and code Playground

by Eric DeCoff

HTML

<div id="toolbar">
  <div>
    <span># of events with .scroll:</span>
    <span id="scrollEventCount1">0</span>
  </div>
  <div>
    <span># of events with on('scroll'):</span>
    <span id="scrollEventCount2">0</span>
  </div>
</div>
<div class="marker">TOP</div>
<div id="tallContainer"></div>
<div class="marker">BOTTOM</div>

CSS

#toolbar {
  background-color: blue;
  color: white;
  position: fixed;
  bottom: 0;
  right: 0;
}

#tallContainer {
  background-color: green;
  height:2000px;
}

.marker {
  background-color: red;
  color: white;
}

JavaScript

var $scrollEventCount1 = $('#scrollEventCount1');
var $scrollEventCount2 = $('#scrollEventCount2');

var count = function ($container) {
	var curr = parseInt($container.html(), 10) || 0;
	$container.html(++curr);
};

$(window).scroll(function(){
	count($scrollEventCount1);
});

$(window).on('scroll', function(){
	count($scrollEventCount2);
});