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").mousedownContent(function(){
            sendDebugMsg("Clicked content.");
        });
        
        $("#both, #none, #x_only, #y_only, #override").mousedownScroll(function(e){
            sendDebugMsg("Clicked scroller.");
        });
    })
})

$.fn.hasScroll = function(axis){
    var overflow = this.css("overflow"),
        overflowAxis,
        bShouldScroll,
        bAllowedScroll,
        bOverrideScroll;
    
    if(typeof axis == "undefined" || axis == "y") overflowAxis = this.css("overflow-y");
    else overflowAxis = this.css("overflow-x");
    
    bShouldScroll = this.get(0).scrollHeight > this.innerHeight();
    
    bAllowedScroll = (overflow == "auto" || overflow == "visible") ||
        (overflowAxis == "auto" || overflowAxis == "visible");
    
    bOverrideScroll = overflow == "scroll" || overflowAxis == "scroll";
    
    return (bShouldScroll && bAllowedScroll) || bOverrideScroll;
};

$.fn.mousedownScroll = function(fn, data){
    var ev_mds = function(e){
        if(inScrollRange(e)) fn.call(data, e);
    }
    $(this).on("mousedown", ev_mds);
    return ev_mds;
};

$.fn.mouseupScroll = function(fn, data){
    var ev_mus = function(e){
        if(inScrollRange(e)) fn.call(data, e);
    }
    $(this).on("mouseup", ev_mus);
    return ev_mus;
};

$.fn.mousedownContent = function(fn, data){
    var ev_mdc = function(e){
        if(!inScrollRange(e)) fn.call(data, e);
    }
    
    $(this).on("mousedown", ev_mdc);
    
    return ev_mdc;
};

$.fn.mouseupContent = function(fn, data){
    var ev_muc = function(e){
        if(!inScrollRange(e)) fn.call(data, e);
    }
    $(this).on("mouseup", ev_muc);
    return ev_muc;
};

var RECT = function(){
    this.top = 0;
    this.left = 0;
    this.bottom = 0;
    this.right = 0;
}

function inRect(rect, x, y){
    return (y >= rect.top && y <= rect.bottom) &&
        (x >= rect.left...