jQuery をベースにリスト ループ スクロールを実装するためのヒント (超簡単)

//入力するデータvar data = {
     情報項目: [
         「<strong>1 行目:</strong>Anzhian ...」
         「<strong>2 行目:</strong>サンシャイン レインボー リトル ホワイト ホースサンシャイン レインボー リトル ホワイト ホース」
         「<strong>第3行:</strong> 天と地の広大さ。天と地の広大さ。天と地の広大さ。天と地の広大さ。」
     ]
 }
 // ページにデータを動的に入力します var infoList = []
 (i = 0 とします; i < data.infoItem.length; i++){
     infoStr = `<div class="item">${data.infoItem[i]}</div>` とします。
     infoList.push(infoStr);
 }
 $(".info-wrapper").html(infoList.join(""))

 // 2秒ごとに実行するタイマーを設定します（1回変更）
 var タイマー = null;
 タイマー = setInterval(関数() {
     // 最初の行の項目を最後の行に移動し、他の項目を空いている行まで上に移動します var infoItemTmp = infoList.shift();
     $(".info-wrapper").append(infoItemTmp);
     $(".item:first").remove();
     infoList.push(infoItemTmp)

 }, 2000)

<div class="コンテナ">
        <div class="wrapper">
            <div class="info">
                <div class="info-wrapper"></div>
            </div>
        </div>
    </div>

。容器 {
    幅: 900ピクセル;
    高さ: 400px;
    境界線: 2px 実線 #eee;
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
}

.ラッパー{
    幅: 500ピクセル;
    高さ: 300px;
    境界線: 1px 実線 #ccc;
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    コンテンツの位置を中央揃えにします。
}

。情報 {
    幅: 100%;
    高さ: 100%;
    ディスプレイ: フレックス;
    flex-direction: 列;
    コンテンツの両端揃え: スペースの間;
    コンテンツの位置を中央揃えにします。
}

.infoラッパー{
    幅: 100%;
    高さ: 100%;
    オーバーフロー: 非表示;
}

。アイテム {
    境界線: 2px 実線 #ccc;
    border-left: 4px 実線オレンジ;
    高さ: 80px;
    幅: 100%;
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
    ボックスのサイズ: 境界線ボックス;
    境界線の半径: 8px;
    上マージン: 20px;
}

.item:最初の子 {
    アニメーション: 2 秒線形移動;
}
@keyframes 移動 {
    100% {
        上マージン: -80px;
    }
}

// アニメーション中に設定された時間と同じ、2 秒ごとに実行 (1 回変更) するようにタイマーを設定します。var timer = null;
タイマー = setInterval(関数() {
    ($('.info').scrollTop() + $('.info').height() >= $('.info-wrapper').height()) の場合 {
        // 最初の行の項目を最後の行に移動し、他の項目を空いている行まで上に移動します var infoItemTmp = infoList.shift();
        $(".info-wrapper").append(infoItemTmp);
        $(".item:first").remove();
        infoList.push(infoItemTmp)
    }
}, 2000)