jQuery realisiert den Scroll-Effekt von Tabellenzeilendaten

<div Klasse="Box">
  <div Klasse="Box-Header">
    <div class="col">Test 1</div>
    <div class="col">Test 2</div>
    <div class="col">Test 3</div>
    <div class="col">Prüfung 4</div>
  </div>
  <div id="Schriftart-Scroll">
    <div Klasse="Kastenkörper">
      <div Klasse="Zeile">
        <div class="col">Testtext</div>
        <div class="col">Testtext</div>
        <div class="col">Testtext</div>
        <div class="col">Testtext</div>
      </div>
      <div Klasse="Zeile">
        <div class="col">Testtext</div>
        <div class="col">Testtext</div>
        <div class="col">Testtext</div>
        <div class="col">Testtext</div>
      </div>
      <div Klasse="Zeile">
        <div class="col">Testtext</div>
        <div class="col">Testtext</div>
        <div class="col">Testtext</div>
        <div class="col">Testtext</div>
      </div>
      <div Klasse="Zeile">
        <div class="col">Testtext</div>
        <div class="col">Testtext</div>
        <div class="col">Testtext</div>
        <div class="col">Testtext</div>
      </div>
      <div Klasse="Zeile">
        <div class="col">Testtext</div>
        <div class="col">Testtext</div>
        <div class="col">Testtext</div>
        <div class="col">Testtext</div>
      </div>
      <div Klasse="Zeile">
        <div class="col">Testtext</div>
        <div class="col">Testtext</div>
        <div class="col">Testtext</div>
        <div class="col">Testtext</div>
      </div>
      <div Klasse="Zeile">
        <div class="col">Testtext</div>
        <div class="col">Testtext</div>
        <div class="col">Testtext</div>
        <div class="col">Testtext</div>
      </div>
      <div Klasse="Zeile">
        <div class="col">Testtext</div>
        <div class="col">Testtext</div>
        <div class="col">Testtext</div>
        <div class="col">Testtext</div>
      </div>
      <div Klasse="Zeile">
        <div class="col">Testtext</div>
        <div class="col">Testtext</div>
        <div class="col">Testtext</div>
        <div class="col">Testtext</div>
      </div>
    </div>
  </div>
</div>

.Kasten {
      Breite: 400px;
      Textausrichtung: zentriert;
      Schriftgröße: 14px;
      Rand: 1px durchgezogen rgba(0, 0, 0, .3);
    }

    .box .box-header {
      Anzeige: Flex;
      Inhalt ausrichten: gleichmäßiger Abstand;
    }

    .box-body .reihe {
      Anzeige: Flex;
      Inhalt ausrichten: gleichmäßiger Abstand;
    }

    .box-header,
    .box-body .reihe {
      Rahmen unten: 1px gestrichelt #404040;
    }

    .box .col {
      Polsterung: 10px 0 10px 0;
    }

    .box .col:n-tes-Kind(1) {
      Breite: 80px;
    }

    .box .col:n-tes-Kind(2) {
      Breite: 60px;
    }

    .box .col:n-tes-Kind(3) {
      Breite: 80px;
    }

    .box .col:n-tes-Kind(4) {
      Breite: 60px;
    }

    /* Inhalt scrollen */

    #Schriftart-Scroll {
      /* Sichtbare Höhe beim Scrollen des Inhalts*/
      Höhe: 199px;
      Überlauf: versteckt;
    }

(Funktion ($) {
  $.fn.FontScroll = Funktion (Optionen) {
    sei d = { Zeit: 1000 }
    $.extend(d, Optionen);

    // Die übergeordnete Div-Box, die gescrollt werden muss let box = this[0]
    // Scrollintervall let _time = d.time

    // Diese Methode ist nur für den Fall geeignet, dass die Höhe jeder Datenzeile gleich ist // // Die Höhe jeder Schriftrolle (normalerweise die Höhe einer Datenzeile)
    // let _contentChildHeight = box.children[0].children[0].offsetHeight
    // // Die gesamte Scrollhöhe, d. h. die Gesamthöhe des Inhalts (die Gesamthöhe aller Daten)
    // lass _contentTotalHeight = _contentChildHeight * box.children[0].children.length

    // Diese Methode ist für alle Fälle geeignet, auch für den Fall, dass die Höhe jeder Datenzeile unterschiedlich ist // Alle Zeilenelemente abrufen let all_row_el = box.children[0].children
    // Gesamtzeilenhöhe let _contentTotalHeight = 0
    // Die Überlagerungshöhe jeder Datenzeile und die Höhe aller vorherigen Zeilen let _contentChildHeight = []
    für (lass i in all_row_el) {
      wenn ((neuer RegExp("^\\d+$")).test(i)) {
        _itemHeight = all_row_el[i].offsetHeight
        _contentTotalHeight += _itemHeight
        i == 0 ? _contentChildHeight.push(_itemHeight) : _contentChildHeight.push(_contentChildHeight[i - 1] + _itemHeight)
      }
    }

    // Die Div-Unterbox, die gescrollt werden muss let child1 = this.children('.box-body')
    // Die scrollende Div-Childbox klonen // Klonmethode 1 // let child1 = this.children('.box-body')[0]
    // lass child2 = this.children('.box-body')[1]
    // Kind2.innerHTML = Kind1.innerHTML
    // Klonmethode 2 if ((box.offsetHeight + 5) < _contentTotalHeight) {
      // Wenn die Daten eine bestimmte Höhe nicht erreichen, wird der Scroll-Effekt nicht ausgeführt child1.clone().insertAfter(child1)
      /*Starte den Timer*/
      let timer = setInterval(autoScrollLine, 30)
      /*Einzeiliger Scroll-Up-Effekt*/
      Funktion autoScrollLine() {
        /* Bestimmen Sie, ob der Scroll-Inhalt gescrollt wurde. Wenn ja, setzen Sie den Scroll-Wert auf 0 zurück.
        Andernfalls scrollen Sie alle 30 Millisekunden 1 Pixel nach oben*/
        if (box.scrollTop >= _contentTotalHeight) {
          : box.scrollTop = 0;
        } anders {
          box.scrollTop++;
        }
        /*Stoppen Sie den Timer, wenn die Scrolldistanz genau der Höhe einer Datenzeile entspricht.
        Starten Sie den Timer nach _time neu, um den Daten-Scroll-Effekt zu erzielen*/
        wenn (_contentChildHeight.indexOf(box.scrollTop) >= 0) {
          Intervall löschen(Timer)
          setzeTimeout(() => {
            Timer = Intervall festlegen (autoScrollLine, 30)
          }, _Zeit)
        }
      }
    }
  }
})(jQuery);

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