JSFiddle - React, Tailwind, and code Playground

by alamin84

HTML

<script src="https://raw.github.com/flesler/jquery.scrollTo/master/jquery.scrollTo.js"></script>

<input id="btnScroll" 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

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

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

    $itemsouter.each(function () {

        var $this = $(this),
            position = $this.offset();
        console.log(position.top);
        if (!$first && position.top >= positions.top) {

            $first = $this
        }
    });
    var $firstinner, $lastinner, $containerinner = $first,
        $itemsinner = $containerinner.children(".sub2"),
        positionsinner = $containerinner.offset(),
        rightsideinner = positionsinner.left + $containerinner.width(),
        bottomsideinner = positionsinner.top + $containerinner.height();


    $itemsinner.each(function () {

        var $thisinner = $(this),
            positioninner = $thisinner.offset();
        console.log(positioninner.top);
        if (!$firstinner && positioninner.top >= positionsinner.top) {

            $firstinner = $thisinner.next();
            console.log($firstinner,  $containerinner);

        }
    });

    $container.scrollTo($($firstinner), {
        duration: 500
    });
 

});