Tips for implementing list loop scrolling based on jQuery (super simple)

//Data to be filledvar data = {
     infoItem: [
         "<strong>Line 1:</strong>Anzhian ...
         "<strong>Line 2:</strong>Sunshine Rainbow Little White HorseSunshine Rainbow Little White HorseSunshine Rainbow Little White Horse",
         "<strong>Line 3:</strong> The vastness of heaven and earth. The vastness of heaven and earth. The vastness of heaven and earth. The vastness of heaven and earth."
     ]
 }
 // Dynamically fill data into the page var infoList = []
 for (let i = 0; i < data.infoItem.length; i++){
     let infoStr = `<div class="item">${data.infoItem[i]}</div>`
     infoList.push(infoStr);
 }
 $(".info-wrapper").html(infoList.join(""))

 // Set a timer to execute every 2 seconds (change once)
 var timer = null;
 timer = setInterval(function () {
     // Move the first row of items to the last row, and move the others up to fill the vacancies var infoItemTmp = infoList.shift();
     $(".info-wrapper").append(infoItemTmp);
     $(".item:first").remove();
     infoList.push(infoItemTmp)

 }, 2000)

<div class="container">
        <div class="wrapper">
            <div class="info">
                <div class="info-wrapper"></div>
            </div>
        </div>
    </div>

.container {
    width: 900px;
    height: 400px;
    border: 2px solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper {
    width: 500px;
    height: 300px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-content: center;
}

.info {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: center;
}

.info-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.item {
    border: 2px solid #ccc;
    border-left: 4px solid orange;
    height: 80px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-radius: 8px;
    margin-top: 20px;
}

.item:first-child {
    animation: move 2s linear;
}
@keyframes move {
    100% {
        margin-top: -80px;
    }
}

// Set the timer to execute (change once) every 2 seconds - the same as the time set during animation var timer = null;
timer = setInterval(function () {
    if ($('.info').scrollTop() + $('.info').height() >= $('.info-wrapper').height()) {
        // Move the first row of items to the last row, and move the others up to fill the vacancies var infoItemTmp = infoList.shift();
        $(".info-wrapper").append(infoItemTmp);
        $(".item:first").remove();
        infoList.push(infoItemTmp)
    }
}, 2000)