JSFiddle - React, Tailwind, and code Playground

HTML

<input id="btnSave" t type="button" value="Click to scroll" />
<br/><br/>
<DIV id="dvmn" class="dvMain">
    <DIV id="d1" class="sub1">
         <DIV id="s11" class="sub2">11</DIV>
        <DIV id="s12" class="sub2">12</DIV>
        <DIV id="s13" class="sub2">13</DIV>
    </DIV>
    <DIV id="d2" class="sub1">
         <DIV id="s21" class="sub2">21</DIV>
        <DIV id="s22" class="sub2">22</DIV>
        <DIV id="s23" class="sub2">23</DIV>
    </DIV> 
       <DIV id="d3" class="sub1">
         <DIV id="s31" class="sub2">31</DIV>
        <DIV id="s32" class="sub2">32</DIV>
        <DIV id="s33" class="sub2">33</DIV>
    </DIV> 
</DIV>

CSS

.CheckArea    {
                 border:Outset 3px Red;width:340px; height:30px; 
            }
.dvMain{
width:400px;height:100px;background-color:black;  overflow: auto;
}
.sub1{
width:190px;height:100px;background-color:purple; 
    margin:  10px auto;
}
.sub2{
width:180px;height:20px;background-color:gray;  margin:  5px auto;
}

JavaScript

$("#btnSave").click(function(event) {

    var $first, $last, $container = $("#dvmn"),
        $items = $container.children(".sub1"),
        positions = $container.offset(),
        rightside = positions.left + $container.width(),
        bottomside = positions.top + $container.height();

    $items.each(function() {
        var $this = $(this),
            position = $this.offset();
       
        if (!$first && position.top >= positions.top) {

            $first = this;
        }
        if (position.top < bottomside && position.left < rightside) {

            $last = this;
        }
    });

    console.log($first, $last);

    //var container = $('div'),
    //    scrollTo = $('#row_8');
    //container.scrollTop(
    //    scrollTo.offset().top - container.offset().top + container.scrollTop()
    //);
    //  
});