JSFiddle - React, Tailwind, and code Playground

HTML

<div id="inner">
    <img src="http://placehold.it/2700x300" />
</div>

CSS

html, body {
    height:100%;
    overflow:hidden;
}

#inner {
    height:100%;
    overflow:scroll;
}

JavaScript

jQuery.fn['any'] = function() {
     return (this.length > 0);
};

if (jQuery("html").css('overflow') == 'hidden') {
    if (jQuery("body").css('overflow') == 'hidden') {
        var scrollElement = jQuery('*').filter(function() { return jQuery(this).css('overflow') == 'scroll'; });
        if (!scrollElement.any()) {
            var scrollElement = jQuery('*').filter(function() { return jQuery(this).css('overflow-y') == 'scroll'; });
            jQuery(scrollElement[0]).scroll(function(){
                //display popup
                alert('scroll')
            });
        }
        else {
            jQuery(scrollElement[0]).scroll(function(){
                //display popup
                alert('scroll')
            });
        }
    }
    else {
        jQuery("body").scroll(function(){
            //display popup
            alert('scroll')
        });
    }
}
else {
    jQuery(window).scroll(function(){
        //display popup
        alert('scroll')
    });
}