Verwenden Sie reines CSS, um einen Scroll-Schatteneffekt zu erzielen

Um es gleich auf den Punkt zu bringen: Bei manchen scrollbaren Elementen gibt es eine sehr häufige Situation. Normalerweise wird beim Scrollen ein Schatten an der Seite senkrecht zum Scrollen hinzugefügt, um anzuzeigen, dass ein Element derzeit aus dem sichtbaren Bereich gescrollt ist, ähnlich wie folgt:

Sie können sehen, dass während des Scrollvorgangs ein Schatten erscheint:

Das Problem, dass die Spalten auf beiden Seiten beim Scrollen stationär und am Rand haften bleiben, wird in CSS normalerweise mit der position: sticky gelöst.

Für den Schatten, der während des Scrollvorgangs erscheint (wenn der Inhalt im Scroll-Container den Rand nicht berührt, erscheint der Schatten, und wenn er den Rand berührt, verschwindet der Schatten), war beim bisherigen Ansatz jedoch immer die Verwendung von JS erforderlich.

Gibt es also eine Lösung, die mit reinem CSS erreicht werden kann? Hehehe, ja. Es gibt einen sehr cleveren Trick, den wir Schritt für Schritt enthüllen wollen.

Magischer background-attachment

Um den oben gezeigten Scroll-Schatten mit reinem CSS zu erzielen, ist das wichtigste zu verwendende Element background-attachment .

In einem früheren Artikel - CSS-Parallaxeffekt - wurde background-attachment ausführlich vorgestellt. Mithilfe von background-attachment: fixed können Sie auf der Website ganz einfach Parallax-Scrolling oder Wasserwelleneffekte wie beim Klicken auf ein Bild erzielen, wie hier:

Unser heutiger Protagonist ist natürlich nicht background-attachment: fixed , sondern background-attachment: srcoll .

background-attachment: srcoll

Lassen Sie uns zunächst über background-attachment sprechen. Wenn background-image angegeben ist, bestimmt background-attachment ob der Hintergrund im Ansichtsfenster fixiert ist oder mit dem Block, der ihn enthält, scrollt.

Einfach ausgedrückt bestimmt es, wie sich das Hintergrundmuster in einem scrollbaren Container bewegt. Verstehen Sie anhand von zwei einfachen Demos background-attachment: srcoll und background-attachment: local .

background-attachment: local , dies entspricht unserem alltäglichen Gebrauch, das Hintergrundmuster des scrollbaren Containers scrollt mit dem Container:

background-attachment: scroll , dies ist heute der Protagonist, es gibt an, dass der Hintergrund relativ zum Element selbst fixiert ist, anstatt mit seinem Inhalt zu scrollen:

Wenn Sie den Unterschied zwischen ihnen immer noch nicht verstehen, können Sie sich die folgende DEMO ansehen und sich selbst davon überzeugen:

CodePen-Demo – bg-attachment-Demo

Verwenden Sie srcoll und local zusammen, um einen Trick zu erreichen

An diesem Punkt sind viele Studierende möglicherweise noch verwirrt. Was genau sollen wir tun? In welcher Beziehung steht dies zum scrollenden Schatten in diesem Artikel?

Keine Sorge, die Schwierigkeit beim Scrollen von Schatten besteht darin, dass es keinen Schatten gibt, wenn am Anfang nicht gescrollt wird. Der Schatten erscheint erst, wenn mit dem Scrollen begonnen wird.

Hier verwenden wir also die beiden Eigenschaften von background-attachment: srcoll und background-attachment: local Zu Beginn des Scrollens verwenden wir zwei Hintergrundebenen, die sich gegenseitig überlappen, um den Schattenhintergrund auszublenden. Beim eigentlichen Scrollen entfernen wir den überlappenden Teil und legen nur den Schattenteil frei.

Äh? Was bedeutet das? Wir fügen dem Scroll-Container zwei Verlaufseffekte hinzu, indem wir background-attachment: srcoll bzw. background-attachment: local verwenden, und überlagern sie dann wie folgt:

<!-- Scrollbarer Container -->
<ul>
    <li>...</li>
    ...
    <li>...</li>
</ul>

// Szenario 1:
.gegangen {
    Hintergrund: linearer Farbverlauf (#fff, #f00);
    Hintergrundgröße: 100 % 10px;
    Hintergrundwiederholung: keine Wiederholung;
    Hintergrundanhang: lokal;
}
 
// Szenario 2:
.g-zwei {
    Hintergrund: radialer Farbverlauf (bei 50 % 0, #000, #0f0 70 %);
    Hintergrundgröße: 100 % 10px;
    Hintergrundwiederholung: keine Wiederholung;
    Hintergrundanhang: scrollen;
}
 
// Szenario 3:
.g-combine {
    Hintergrund:
        linearer Gradient(#fff, #f00),
        radialer Farbverlauf (bei 50 % 0 %, #000, #0f0 70 %);
    Hintergrundgröße: 100 % 10px, 100 % 10px;
    Hintergrundwiederholung: keine Wiederholung;
    Hintergrundanhang: lokal, scrollen;
}

Der tatsächliche Effekt ist folgender: Ein Hintergrund scrollt mit dem Container und der andere Hintergrund ist mit dem Container fixiert. Der Hintergrund, der mit dem Container scrollt, fungiert als Anfangsmaske:

OK, Sie können sehen, dass beim Scrollen das letzte überlagerte Bild tatsächlich der Effekt ist, den wir benötigen, um beim Scrollen unterschiedliche Farben (Schatten) anzuzeigen. Wir passen die Farben der beiden Farbverläufe an, setzen die Maskenebene ( background-attachment: local ) auf Weiß und simulieren dann mit einem radialen Farbverlauf die gewünschte Schattenfarbe für die feste Schattenebene ( background-attachment: scroll ).

Der CSS-Code sieht folgendermaßen aus:

.g-final {
    Hintergrund:
        linearer Farbverlauf (#fff, transparent 100 %),
        linearer Farbverlauf (rgba (0, 0, 0, .5), transparent 100 %);
    Hintergrundgröße: 100 % 30px, 100 % 10px;
    Hintergrundwiederholung: keine Wiederholung;
    Hintergrundanhang: lokal, scrollen;
}

Ein grauer Schatten wird mit linear-gradient(rgba(0, 0, 0, .5), transparent 100%) simuliert:

OK, es ist erledigt. Alle oben genannten DEMOS können Sie hier ansehen:

CodePen-Demo – Reiner CSS-Scroll-Schatten

Wie am Anfang des Artikels gezeigt, kann diese Technik auch direkt auf table angewendet werden:

CodePen-Demo – Reiner CSS-Tabellen-Scrollschatten

Einige Fragen in kaskadierender Reihenfolge

Natürlich gibt es bei dem obigen Vorgang tatsächlich ein Problem. Da der Schatten durch den background simuliert wird, besteht der endgültige Effekt darin, dass sich der Inhalt im Schatten befindet (über dem Hintergrund), aber der tatsächliche Effekt ist nicht viel anders. Wenn Sie dies tolerieren können, ist diese Lösung vollständig verwendbar.

Kompatibilität

Natürlich gibt es noch ein weiteres Problem, nämlich die Kompatibilität der background-attachment . Schauen wir uns an, KANN ICH VERWENDEN:

Die Kommentare unter „Kann ich verwenden“ weisen darauf hin, dass die meisten Kompatibilitätsprobleme durch background-attachment: fixed verursacht werden, was kaum Auswirkungen auf die Wirksamkeit dieses Artikels hat.

endlich

Die Techniken in diesem Artikel sind nicht neu. Ich habe sie zum ersten Mal in diesem Artikel gesehen: Den praktischen Wert des CSS-Attributs *-gradient untersuchen und weiter untersuchen, ob es in der Praxis verwendet werden kann.

Dies ist das Ende dieses Artikels über die Verwendung von reinem CSS zum Erzielen von Scroll-Shade-Effekten. Weitere relevante CSS zum Erzielen von Scroll-Shade-Inhalten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!