Scroll-Schatten sind ein kleiner, nach innen versetzter Schatten auf Elementen, wenn (und nur wenn) in diese Richtung gescrollt werden kann. Das ist einfach gutes UX. Man kann dies tatsächlich mit CSS umsetzen, was ich erstaunlich finde und einen der großartigen CSS-Tricks darstellt. Nur… es funktioniert einfach nicht auf iOS Safari. Es hat früher funktioniert und dann ist in iOS 13 kaputtgegangen, zusammen mit einigen anderen nützlichen CSS-Dingen, ohne Erklärung, warum und wurde nie behoben, aber ist jetzt behoben, zumindest seit Juli 2022 (danke Ronald!).
Hier ist ein reines CSS-Beispiel, damit du es in allen Browsern sehen kannst. Screenshots
Ich bringe das jetzt zur Sprache, weil ich sehe, dass Jonnie Hallman wieder darüber bloggt. Er hat es im Mai als ein großartiges kleines Detail erwähnt. Es gibt bestimmte Benutzeroberflächen, bei denen Scroll-Schatten wirklich extra Sinn ergeben.
Wenn ich einen Schritt zurücktrete, dachte ich über die Lösung nach, die aktuell funktionierte und Scroll-Events nutzte. Wenn der Scrollbereich gescrollt wurde, zeige die oberen und linken Schatten an. Wenn der Scrollbereich nicht vollständig gescrollt wurde, zeige die unteren und rechten Schatten an. Mit diesem Gedanken habe ich den einfachsten, geradlinigsten und am wenigsten raffinierten Ansatz versucht, indem ich leere divs oben, rechts, unten und links von den Scrollbereichen platziert habe. Ich nannte diese "Kanten" und beobachtete sie mit der Intersection Observer API. Wenn eine der Kanten nicht mit dem Scrollbereich interagierte, konnte ich davon ausgehen, dass die betreffende Kante gescrollt wurde und ich konnte den Schatten für diese Kante anzeigen. Sobald die Kante dann interagierte, konnte ich davon ausgehen, dass der Scrollbereich den Rand des Scrolls erreicht hatte, und somit diesen Schatten ausblenden.
Raffiniert, raffiniert. Leider keine Live-Demo, aber lies den Beitrag für einige zusätzliche Details zur Implementierung.
Andere JavaScript-basierte Beispiele
Ich denke, wenn du das machen willst, solltest du trotzdem den IntersectionObserver-Weg gehen. Würde mich freuen, wenn jemand das Beste dieser Ideen zusammenführt (zwinker zwinker).
Schau dir auch diesen Artikel von Lea Verou an
https://lea.verou.me/2012/04/background-attachment-local/
Immer noch ein Fan des reinen CSS-Ansatzes. In Safari (auf iOS) werden diese Schatten an der richtigen Stelle gerendert, aber sie werden beim Scrollen nicht neu gerendert. Mit einem kleinen bisschen JS kannst du ein Neu-Rendern erzwingen.
Siehe https://www.bram.us/2019/10/24/pure-css-scroll-shadows-vertical-horizontal/#note-mobilesafari für Details + Code.
UPDATE: Es stellt sich heraus, dass dieser Workaround in iOS15 nicht mehr funktioniert
Das reine CSS-Beispiel (
Hier ist ein reines CSS-Beispiel, damit du es in allen Browsern außer iOS Safari sehen kannst.) funktioniert für mich tatsächlich auf iOS Safari.Es hat mich davon abgehalten, diesen super einfachen und sauberen Weg zu nutzen, aber jetzt, wo es funktioniert, ist es mein absoluter Lieblingsweg.
(Es wäre toll, wenn der Artikel aktualisiert werden könnte)
Na klar, danke für den Hinweis!