JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <br /><br />
            <div class="currentContent">
                <div class="content">
                    <div style="height:537px">
                    </div>
                    <div class="getoffset" style="height: 474px;background-color: red;">
                      <div class="getoffset__jquery"></div>
                      <div class="getoffset__javascript"></div>
                    </div>
                    <div style="height: 500px;">
                    </div>
                </div>
            </div>
        </div>

CSS

html,body{
    height:100%;
    margin:0;
    padding:0;
} .container,.currentContent{
    position:relative;
    height:100%
} .currentContent{
    overflow: auto;
}

JavaScript

$(document).ready(function () {

  $(".currentContent").scroll(function () {
    $(".getoffset__jquery").html(
      "<strong>jQuery</strong> "+
      "scrolTop:"+$(this).scrollTop()+
      "offset:"+($(".getoffset").offset().top - $(".getoffset").offsetParent().offset().top))

    const $el = this,
    			$getOffset = document.querySelector('.getoffset');
     
     
    $(".getoffset__javascript").html(
      "<strong>Javascript</strong> " +
      "scrolTop: "+ this.scrollTop +
      "offset: "+ ($getOffset.getBoundingClientRect().top - $getOffset.offsetParent.getBoundingClientRect().top)
    )    
  });
  
});