引入jq包

<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>

html代码

 <div class="scroll02">
        <div class="scroll01">
            <div class="info">
                <div class="scorll"></div>
            </div>
        </div>
    </div>

css代码

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

.scroll01 {
    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;
}

.scorll {
    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;
    }
}
    </style>

js代码

// 要填充的数据
var data = {
     infoItem : [
         "<strong>第1行：</strong>123333333333333333323333333333333333",
         "<strong>第2行：</strong>234424332432444444444444444444444444",
         "<strong>第3行：</strong>243333333333333333333324324324343234"
     ]
 }
 // 将数据动态填充到页面种
 var infoList = []
 for (let i = 0; i < data.infoItem.length; i++){
     let infoStr = `<div class="item">${data.infoItem[i]}</div>`
     infoList.push(infoStr);
 }
 $(".scorll").html(infoList.join(""))//以html的形式展示

// 设置计时器，每隔2秒执行一次（变换一次）--与animation动画时设置时间一致
var timer = null;
timer = setInterval(function () {
    if ($('.info').scrollTop() + $('.info').height() >= $('.scorll').height()) {
        // 将第一行item移到最后一行，其他的往上挪填补空缺位
        //shift 从数组中删除 第一个  一直删除第一个 又一直往数组中添加第一个  达到循环滚动的效果。
        var infoItemTmp = infoList.shift();//删除
        $(".scorll").append(infoItemTmp); //添加
        $(".item:first").remove();// //移除掉页面中显示的第一个  给刚刚添加的让位置
        infoList.push(infoItemTmp) 
    }
}, 2000)