jQueryはテーブル行データのスクロール効果を実現します

<div class="box">
  <div class="box-header">
    <div class="col">テスト 1</div>
    <div class="col">テスト 2</div>
    <div class="col">テスト 3</div>
    <div class="col">テスト 4</div>
  </div>
  <div id="font-scroll">
    <div class="box-body">
      <div class="row">
        <div class="col">テストテキスト</div>
        <div class="col">テストテキスト</div>
        <div class="col">テストテキスト</div>
        <div class="col">テストテキスト</div>
      </div>
      <div class="row">
        <div class="col">テストテキスト</div>
        <div class="col">テストテキスト</div>
        <div class="col">テストテキスト</div>
        <div class="col">テストテキスト</div>
      </div>
      <div class="row">
        <div class="col">テストテキスト</div>
        <div class="col">テストテキスト</div>
        <div class="col">テストテキスト</div>
        <div class="col">テストテキスト</div>
      </div>
      <div class="row">
        <div class="col">テストテキスト</div>
        <div class="col">テストテキスト</div>
        <div class="col">テストテキスト</div>
        <div class="col">テストテキスト</div>
      </div>
      <div class="row">
        <div class="col">テストテキスト</div>
        <div class="col">テストテキスト</div>
        <div class="col">テストテキスト</div>
        <div class="col">テストテキスト</div>
      </div>
      <div class="row">
        <div class="col">テストテキスト</div>
        <div class="col">テストテキスト</div>
        <div class="col">テストテキスト</div>
        <div class="col">テストテキスト</div>
      </div>
      <div class="row">
        <div class="col">テストテキスト</div>
        <div class="col">テストテキスト</div>
        <div class="col">テストテキスト</div>
        <div class="col">テストテキスト</div>
      </div>
      <div class="row">
        <div class="col">テストテキスト</div>
        <div class="col">テストテキスト</div>
        <div class="col">テストテキスト</div>
        <div class="col">テストテキスト</div>
      </div>
      <div class="row">
        <div class="col">テストテキスト</div>
        <div class="col">テストテキスト</div>
        <div class="col">テストテキスト</div>
        <div class="col">テストテキスト</div>
      </div>
    </div>
  </div>
</div>

。箱 {
      幅: 400ピクセル;
      テキスト配置: 中央;
      フォントサイズ: 14px;
      境界線: 1px実線 rgba(0, 0, 0, .3);
    }

    .box .box-header {
      ディスプレイ: フレックス;
      コンテンツの均等配置: スペースを均等に;
    }

    .box-body .row {
      ディスプレイ: フレックス;
      コンテンツの均等配置: スペースを均等に;
    }

    .box-header、
    .box-body .row {
      border-bottom: 1px 破線 #404040;
    }

    .box .col {
      パディング: 10px 0 10px 0;
    }

    .box .col:n番目の子(1) {
      幅: 80ピクセル;
    }

    .box .col:n番目の子(2) {
      幅: 60ピクセル;
    }

    .box .col:n番目の子(3) {
      幅: 80ピクセル;
    }

    .box .col:n番目の子(4) {
      幅: 60ピクセル;
    }

    /* コンテンツのスクロール */

    #フォントスクロール{
      /* コンテンツのスクロール表示の高さ*/
      高さ: 199px;
      オーバーフロー: 非表示;
    }

(関数 ($) {
  $.fn.FontScroll = 関数 (オプション) {
    d = { 時間: 1000 } とします。
    オプションを拡張します。

    // スクロールする必要があるdiv親ボックスlet box = this[0]
    // スクロール間隔 let _time = d.time

    // この方法は、各データ行の高さが同じ場合にのみ適しています // // 各スクロールの高さ (通常はデータ行の高さ)
    // _contentChildHeight = box.children[0].children[0].offsetHeight とします
    // // 合計スクロール高さ、つまりコンテンツの合計高さ（すべてのデータの合計高さ）
    // _contentTotalHeight = _contentChildHeight * box.children[0].children.lengthとする

    // この方法は、各行のデータの高さが異なる場合も含め、あらゆるケースに適しています // すべての行要素を取得します let all_row_el = box.children[0].children
    // 行の合計の高さ let _contentTotalHeight = 0
    // 各データ行の重ね合わせの高さと、それ以前のすべての行の高さ let _contentChildHeight = []
    for (let i in all_row_el) {
      if ((新しい正規表現("^\\d+$")).test(i)) {
        _itemHeight = all_row_el[i].offsetHeight
        _contentTotalHeight += _itemHeight
        i == 0 ? _contentChildHeight.push(_itemHeight) : _contentChildHeight.push(_contentChildHeight[i - 1] + _itemHeight)
      }
    }

    // スクロールする必要がある div サブボックス let child1 = this.children('.box-body')
    // スクロール div 子ボックスを複製します // 複製メソッド 1 // let child1 = this.children('.box-body')[0]
    // child2 = this.children('.box-body')[1] とします
    // 子2.innerHTML = 子1.innerHTML
    // クローンメソッド 2 if ((box.offsetHeight + 5) < _contentTotalHeight) {
      // データが特定の高さに達しない場合、スクロール効果は実行されません child1.clone().insertAfter(child1)
      /*タイマーを開始する*/
      タイマーをsetInterval(autoScrollLine, 30)に設定します。
      /* 1行スクロールアップ効果 */
      関数 autoScrollLine() {
        /* スクロールコンテンツがスクロールされたかどうかを判断し、スクロールされた場合はスクロール値を 0 にリセットします
        それ以外の場合は、30ミリ秒ごとに1ピクセル上にスクロールします*/
        box.scrollTop >= _contentTotalHeight の場合 {
          ボックスのスクロールトップ = 0;
        } それ以外 {
          ボックスのスクロールトップ++;
        }
        /* スクロール距離がデータ行の高さとちょうど同じになったらタイマーを停止します。
        データのスクロール効果を実現するには、_time 後にタイマーを再起動します*/
        _contentChildHeight.indexOf(box.scrollTop) >= 0 の場合
          クリアインターバル(タイマー)
          タイムアウトを設定する(() => {
            タイマー = setInterval(autoScrollLine, 30)
          }、 _時間）
        }
      }
    }
  }
})(jQuery);

$('#font-scroll').FontScroll({ 時間: 1000 });