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

Implementierung der Nginx-Domänennamenweiterleitung für den HTTPS-Zugriff

Redission-Tomcat implementiert schnell die Bereitstellung von einer einzelnen Maschine zur Bereitstellung auf mehreren Maschinen

Artikel

CSS3 erzielt einen unendlichen Scroll-/Karusselleffekt der Liste

Implementierung der Nginx-Domänennamenweiterleitung für den HTTPS-Zugriff

Detaillierte Erläuterung der Installationsschritte der dekomprimierten MySQL-Version

Das Prinzip und die Richtung von JavaScript

Zwei einfache Beispiele für Menünavigationsleisten

So generieren Sie ein kostenloses Zertifikat mit OpenSSL

So bereinigen Sie schnell Milliarden von Daten in einer MySQL-Datenbank

Ursachen und Lösungen für langsame MySQL-Abfragen

Der URL-Wert des SRC- oder CSS-Hintergrundbildes ist der Base64-codierte Code

Dieser Artikel zeigt Ihnen detailliert, wie Sie SQL CASE WHEN verwenden

Redission-Tomcat implementiert schnell die Bereitstellung von einer einzelnen Maschine zur Bereitstellung auf mehreren Maschinen

Artikel empfehlen

Docker unter Linux installieren (sehr einfache Installationsmethode)

jQuery implementiert das Ausblenden und Anzeigen von HTML-Elementen

Detaillierte Erklärung des Loop-Formularelementbeispiels in Vue

Analyse des MySQL-Client-Installationsprozesses auf dem Mac

Analyse des Prozesses zum Erstellen eines LAN-Servers basierend auf http.server

Detaillierte Schritte zur Installation und Konfiguration von MySQL 8.0 auf CentOS

MySQL lösen: FEHLER 1045 (28000): Zugriff verweigert für Benutzer ‚root‘@‚localhost‘ (mit Passwort: NEIN/JA)

Mysql löst das N+1-Abfrageproblem der Datenbank

So verwenden Sie CSS-Attributselektoren zum Spleißen von HTML-DNA

Tutorial zur Installation von MySQL8 auf Centos7

Lösung für das Problem des verstümmelten Codes in MySQL 5.x

Detaillierte Erklärung zur Installation und Verwendung von Vue-Router

MySQL-Datentabellenpartitionierungsstrategie und Vor- und Nachteileanalyse

Detaillierte Erläuterung des Installationsprozesses der Standard-MySQL-Version (x64) für Windows

Node.js+Postman zur Simulation der HTTP-Server- und Client-Interaktion