CSS3 erzielt einen unendlichen Scroll-/Karusselleffekt der Liste

Effektvorschau

Ideen

Scrollen Sie durch die aktuelle Liste bis zum Ende des letzten Eintrags und wechseln Sie dann sofort zurück zum ersten Eintrag

Problem

1. Wie implementiere ich ein Endloskarussell? Das Problem ist, dass beim Scrollen der Liste bis zum Ende unten ein leerer Bereich (zusätzlicher Platz) verbleibt. Wie gehe ich damit um?
Fügen Sie einfach die doppelten Elemente am Anfang der Liste bis zum Ende der Liste hinzu (beispielsweise sind 1, 2, 3, 4 und 5 nach 10 in der Abbildung doppelte Elemente).
Die Anzahl der hinzugefügten doppelten Elemente wird durch die aktuelle Listenhöhe und die Höhe der Listenelemente bestimmt, zum Beispiel:
Wenn die Listenhöhe 150px und die Listenelementhöhe 30px beträgt, müssen Sie 150 / 30 = 5 doppelte Elemente am Ende der aktuellen Liste hinzufügen, um den Leerraum zu entfernen.

2. Wie können Benutzer unbemerkt zum ersten Element zurückkehren? Kontrollieren Sie nach dem Hinzufügen der doppelten Elemente den Umschaltzeitpunkt und wechseln Sie sofort, wenn die Liste zum Ende des letzten Elements (dem Anfang des ersten Elements des doppelten Elements) gescrollt ist. Zum Beispiel:
Wenn die Liste 10 Elemente enthält, wechseln Sie sofort, wenn sich die Liste auf 10 * 30px = 300px bewegt, um ein unmerkliches Umschalten zu erreichen

Code

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Liste mit unendlichem Scrollen</title>
</Kopf>
<Stil>
    .container {
        Position: relativ;
        Hintergrundfarbe: #a4ffcc;
        /* Der übergeordnete Container muss eine lichte Höhe haben */
        Höhe: 150px;
        Breite: 200px;
        Rand: automatisch;
        Überlauf: versteckt;
    }

    .container > .scroll-list {
        Position: absolut;
        oben: 0;
        links: 0;
        Breite: 100 %;
        Animation: Scrollen 6 s linear unendlich normal;
    }

    .container > .scroll-list > div {
        Breite: 100 %;
        /* Das scrollbare Element muss eine bestimmte Höhe haben */
        Höhe: 30px;
        Hintergrundfarbe: #1ea7ff;
        Anzeige: Flex;
        Inhalt ausrichten: zentriert;
        Elemente ausrichten: zentrieren;
        Farbe: weiß;
    }

    .container > .scroll-list > div:nth-child(2n) {
        Hintergrundfarbe: #18d9f8;
    }

    @keyframes scrollen {
        100 % {
            /*Gesamthöhe des zu scrollenden Inhalts*/
            oben: -300px;
        }
    }
</Stil>
<Text>
    <div Klasse="Container">
        <div Klasse="Scrollliste">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
            <!-- Der folgende Code ermöglicht es, dass der scrollende Inhalt einen weiteren Bildschirm anzeigt (Leerzeichen/unendliches Karussell entfernen): Bitte berechnen Sie die Zahl entsprechend der Höhe-->
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </div>
</body>
</html>

Dies ist das Ende dieses Artikels über die Implementierung von unendlichem Scrollen/Karussells von Listen mit CSS3. Weitere relevante CSS3-Inhalte zum Scrollen von Listen und Karussells finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: So importieren Sie CSS-Stile in externe HTML-Stylesheets

>>: Eine kurze Zusammenfassung zum Schreiben von Pfaden, wenn HTML-Dateien externe CSS-Dateien einführen

CSS3 erzielt einen unendlichen Scroll-/Karusselleffekt der Liste

Drei häufig verwendete MySQL-Datentypen

So erstellen Sie eine virtuelle Maschine mit Vagrant+VirtualBox

JavaScript zum Erzielen eines einfachen Karusselleffekts

Drei nützliche Codes, damit sich Besucher an Ihre Website erinnern

So implementieren Sie Docker, um Parameter dynamisch an Springboot-Projekte zu übergeben

Beispiel für einen SQL-Seriennummernerfassungscode

Detaillierte Erklärung der GaussDB zur MySQL-Leistungsoptimierung

HTML + CSS + JS realisiert den Scroll-Gradienteneffekt der Navigationsleiste

Sind Sie immer noch Select *?

Detaillierte Erklärung der Destrukturierungszuweisungssyntax in Javascript

Artikel empfehlen

So aktivieren Sie das Root-Konto in Ubuntu 20.04

Tipps zur Verwendung von Frameset zum Zentrieren des Breitbilds

Einige Methoden zur Dateiberechtigungsverwaltung unter Linux, die Sie möglicherweise nicht kennen

Detaillierte Erklärung zur Verwendung von $props, $attrs und $listeners in Vue

Implementierung der Codeoptimierung zur Leistungsoptimierung von Vue2.x-Projekten

Detaillierte Erklärung der Unterschiede und Verwendungen von Linux-System-Shutdown-Befehlen

Zusammenfassung der Standardverwendung von HTML-, CSS- und JS-Kommentaren

Detaillierte Erläuterung des Prozessmanagements im Linux-System

Lösung zum Vergessen des MySQL-Datenbankkennworts unter MAC

Detaillierte Erklärung, wie man einen Docker-Container verlässt, ohne ihn zu schließen

JavaScript-Funktion Currying

Beispielcode zur Realisierung eines Buchseitenumblättereffekts mit CSS3

Detaillierte Erklärung der langsamen Remote-Verbindung von Navicat zu MySQL

Was ist der Unterschied zwischen HTM und HTML? Was ist der Unterschied zwischen HTM und HTML?

jQuery implementiert das Klicken auf die linke und rechte Schaltfläche zum Wechseln von Bildern