JSFiddle - React, Tailwind, and code Playground

HTML

<div id = "content_wrapper">
<div id = "content">This is some content</div>
<div id = "footer">This is the footer</div>
</div>

CSS

#content {
    background-color:#f00;
    width:100%;
    height:1000px;
}

#footer {
    background-color:#000;
    color:#fff;
    width:100%;
    height:200px;
}

JavaScript

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
      && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
}


$(document).ready(function(){
    $("#content_wrapper").scroll(function() {
       console.log("Scrolling 1");
    });
    
    $("#content_wrapper").on("scroll", function(){
       console.log("Scrolling 2"); 
    });
});