JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
        <div class="child">
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
    </div>
    Test<br/>
    Test<br/>
    Test<br/>
    Test<br/>
</div>

CSS

.parent{
    height: 80px;
    overflow: auto;
}
.child{
    height: 60px;
    overflow: auto
}

JavaScript

var isCanceled = false;
var currentPos = $(".parent").scrollTop();
var stopWheelTimer = undefined;

$(".child").on('mousewheel', function (event) {
    clearTimeout(stopWheelTimer);
    event.stopPropagation();
    isCanceled = true;
    currentPos = $(".parent").scrollTop();
    stopWheelTimer = setTimeout(function(){
        isCanceled = false;        
    }, 250);
    
});
$(".parent").on('mousewheel', function (elem) {
    if(isCanceled)
    {
        $(elem.target).scrollTop(currentPos);
    }
}); 
$(".parent").on('scroll', function (elem) {
   if(isCanceled)
    {        
        $(elem.target).scrollTop(currentPos);
    }
});