JSFiddle - React, Tailwind, and code Playground

HTML

<div class='root'>
    <div class='main' style='background-color:yellow; height: 400px; width: 300px; overflow: scroll; position: fixed; left: 40px; top: 90px;'>
     
</div>
    <div class='log' style='position:fixed; left: 350px; top: 90px;'></div>
</div>

CSS

.main >div {
  height: 30px;
  padding: 10px;
  border: 2px solid blue;
  margin: 3px;
}

JavaScript

$.fn.offsetRelative = function(top){
    var $this = $(this);
    var $parent = $this.offsetParent();
    var offset = $this.position();
    
    // add scroll
    offset.top += $this.scrollTop()+$parent.scrollTop();
    offset.left += $this.scrollLeft()+$parent.scrollLeft();
    if(!top) {
        // Didn't pass a 'top' element
        return offset;
    } else if($parent.get(0).tagName == "BODY") {
        // Reached top of document
        return offset;
    } else if($($(top),$parent).length) {
        // Parent element contains the 'top' element we want the offset to be relative to
        return offset;
    } else if($parent[0] == $(this).closest(top)[0]) {
        // Reached the 'top' element we want the offset to be relative to
        return offset;
    } else {
        // Get parent's relative offset
        var parent_offset = $parent.offsetRelative(top);
        offset.top += parent_offset.top;
        offset.left += parent_offset.left;
        return offset;
    }
};
for(var _tmp = 1; _tmp <= 40; _tmp++) {
    $("div.main").append("<div></div>");        
}
var count = 1;
$("div.main").find("div").each(function() {
    $(this).addClass("child_" + count);
    $(this).html("Child " + count);
    count++;
});
var log = $(".log");
$("div").click(function() {
    log.prepend("<br/>Processing: " + $(this).html() + "<br/><br/>");
    log.prepend("Top: " + $(this).offsetRelative(".root").top);
    log.prepend("Left: " + $(this).offsetRelative(".root").left + "&nbsp;&nbsp;&nbsp;");
    return false;
});