JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <div class="child">0</div>
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
</div>

SCSS

.parent {
    position: absolute;
    top: 30px;
    height: 250px;
    width: 250px;
    overflow: hidden;
    border: 1px solid blue;
    .child {
        width: 100%;
        height: 100%;
        background-color: red;
        border: 1px solid blue;
    }
}

JavaScript

//scroll to 2nd one first
var index = 1;

setInterval(function(){
    var parent = $('.parent');
    var children = parent.find('.child');
    var target = children.eq(index);   
    var offset = target.offset().top - $('.parent').offset().top;
    
    //outputs the same value every other time
    console.log(target.offset().top);
    
    parent.animate({
        scrollTop: offset
    }, 200);
    index = (index+1) % children.length;
}, 1000);