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

Der Unterschied und die Gründe zwischen den MySQL-Abfragebedingungen nicht in und in

CSS3 erzielt einen unendlichen Scroll-/Karusselleffekt der Liste

Der Unterschied und die Gründe zwischen den MySQL-Abfragebedingungen nicht in und in

Mobile Web-Bildschirmanpassung (rem)

Die häufigste Deklarationszusammenführung in TS (Schnittstellenzusammenführung)

Beispielcode für nahtloses Scrollen mit Flex-Layout

Erläuterung des MySQL-Nicht-Null-Einschränkungsfalls

Problem „Nicht genügend Speicher“ und Lösung, wenn Docker Elasticsearch startet

Dieser Artikel zeigt Ihnen, wie Sie mit CSS-Kombinationsselektoren spielen

So fügen Sie Bilder in HTML-Seiten ein und fügen Kartenindexbeispiele hinzu

Verwenden Sie die Befehle more, less und cat in Linux, um Dateiinhalte anzuzeigen

Analyse und Lösung des durch Chrome 73 verursachten Flex-Layout-Zusammenbruchs

Artikel empfehlen

So schreiben Sie hochwertigen JavaScript-Code

Implementierung der Einbindung eines freigegebenen NFS-Verzeichnisses in einen Docker-Container

Gründe und Lösungen für die Unfähigkeit, Array-Änderungen in Vue2 zu erkennen

Webdesign-Erfahrung: Effizientes Schreiben von Webcode

So konfigurieren Sie den Runner-Container in Docker

Ein Artikel, der Ihnen hilft, die Grundlagen von VUE zu verstehen

So ändern Sie die Konfiguration von „create-react-app“, ohne „eject“ zu verwenden

Vue2.x - Beispiel für die Verwendung von Anti-Shake und Throttling

Vue implementiert Ankerpositionierungsfunktion

So zeigen Sie die IP-Adresse des Docker-Containers an

Detaillierte Erklärung des Unterschieds zwischen chown- und chmod-Befehlen in Linux

Detaillierte Einführung in den MySQL-Datenbankindex

Das Miniprogramm implementiert nativ das linksseitige Schubladenmenü

So wählen und verwenden Sie PNG, JPG und GIF als Web-Bildformate

Ubuntu installiert mehrere Versionen von CUDA und wechselt jederzeit