JSFiddle - React, Tailwind, and code Playground

HTML

<div id="both">
    <div class="filler">Both</div>
</div>
<div id="none">
    <div class="filler">None</div>
</div>
<div id="x_only">
    <div class="filler">X</div>
</div>   
<div id="y_only">
    <div class="filler">Y</div>
</div>

<div id="override">
    <div class="filler_over">Overridden</div>
</div>

<div id="debugger">
</div>

CSS

#both, #x_only, #y_only, #none, #override{
    width: 100px;
    height: 100px;
    overflow: auto;
    
    margin: 0 auto;
    border: 1px solid gray;
}

#none{
    overflow: hidden;
}

#x_only{
    overflow-y: hidden;
}

#y_only{
    overflow-x: hidden;
}

#override{
    overflow: scroll;
}

.filler{
    height: 150px;
    width: 150px;
}

.filler_over{
    height: 100%;
    width: 100%;
}

.range{
}

#debugger{
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: 180px;
    height: 120px;
    border-top: 1px solid gray;
    border-left: 1px solid gray;
}

JavaScript

$(function(){$(function(){ //Just to get jsfiddle to work
    $("#both, #none, #x_only, #y_only, #override").mousedown(function(e){
        sendDebugMsg("Clicked content.");
 
    });
    
    $("#both, #none, #x_only, #y_only, #override").mousedownScroll(function(e){
        sendDebugMsg("Clicked scroller.");
    });
})})

$(function(){
    
    $.fn.hasScroll = function(axis){
        var overflow = this.css("overflow"),
            overflowAxis;
        
        if(typeof axis == "undefined" || axis == "y") overflowAxis = this.css("overflow-y");
        else overflowAxis = this.css("overflow-x");
        
        var bShouldScroll = this.get(0).scrollHeight > this.innerHeight();
        
        var bAllowedScroll = (overflow == "auto" || overflow == "visible") ||
                             (overflowAxis == "auto" || overflowAxis == "visible");
        
        var bOverrideScroll = overflow == "scroll" || overflowAxis == "scroll";
        
        return (bShouldScroll && bAllowedScroll) || bOverrideScroll;
    };
    
    $.fn.mousedown = function(data, fn) {
        if ( fn == null ) {
            fn = data;
            data = null;
        }    
        var o = fn;
        fn = function(e){
            if(!inScrollRange(e)) {
                return o.apply(this, arguments);
            }
            return;
        };
        if ( arguments.length > 0 ) {
            return this.bind( "mousedown", data, fn );
        } 
        return this.trigger( "mousedown" );
    };
    
    $.fn.mouseup = function(data, fn) {
        if ( fn == null ) {
            fn = data;
            data = null;
        }    
        var o = fn;
        fn = function(e){
            if(!inScrollRange(e)) {
                return o.apply(this, arguments);
            }
            return;
        };
        if ( arguments.length > 0 ) {
            return this.bind( "mouseup", data, fn );
        } 
        return this.trigger( "mouseup" );
    };
    
    $.fn.mousedownScroll =...