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>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;
}

.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.mousedownScroll = function(fn, data){
        if(typeof fn == "undefined" && typeof data == "undefined"){
            $(this).trigger("mousedownScroll");
            return;
        }
        
        $(this).on("mousedownScroll", data, fn);
    };
    
    $.fn.mouseupScroll = function(fn, data){
        if(typeof fn == "undefined" && typeof data == "undefined"){
            $(this).trigger("mouseupScroll");
            return;
        }
        
        $(this).on("mouseupScroll", data, fn);
    };
    
    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 && x <= rect.right)
    }
    
    
    var scrollSize = 18;
    
    function inScrollRange(event){
        var x = event.pageX,
            y = event.pageY,
            e =...