JSFiddle - React, Tailwind, and code Playground

HTML

<div id="occured" class="elem">Direct scroll Handler was executed 0 times</div>
<div id="occured2" class="elem">Indirect scroll handler was executed 0 times</div>

<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>
<div class="elem">CONTENT</div>

CSS

#occured {
    position: fixed;
    background: red;
    left: 0;
    top: 0;
    z-index: 999;
}
#occured2 {
    position: fixed;
    background: green;
    left: 0;
    top: 3em;
    z-index: 999;
}
.elem {
    padding: 1em;
    font-family: Helvetica;
    font-size: 18px;
    background: black;
    color: white;
    width: 100%;
}
.elem.last {
    background: red;
    color: white;
}

JavaScript

$(document).ready(function() {
    var occurred = $('#occured');
    var occurred2 = $('#occured2');
    var count = 0;
    var count2 = 0;
    var scrolled = false;

    $(window).on('scroll', function(e) {
        scrolled = true;
        count++;
        occurred.text('Direct scroll handler was executed ' + count + ' times');
    });
    setInterval(function() {
        if (scrolled) {
            scrolled = false;
            count2++;
            occurred2.text('Indirect scroll handler was executed ' + count2 + ' times');

        }
    }, 200);
});