Scrollen Sie Schatten mit JavaScript

Scrolling Shadows sind ein gutes Design des Benutzererlebnisses, und ein kleiner innerer Schatten wird nur angezeigt, wenn ein Element scrollen kann. Überraschenderweise kann dies mit CSS erreicht werden und ist ein Beispiel für CSS -Fähigkeiten. Allerdings ... es funktioniert nicht auf iOS safari. Früher funktionierte es, aber es ist in iOS 13 und einigen anderen nützlichen CSS -Funktionen fehlgeschlagen, ohne Erläuterung dafür, warum, und wurde nicht repariert , aber es wurde jetzt zumindest im Juli 2022 repariert (dank Ronald!).

Hier ist ein reines CSS -Beispiel, dass Sie seinen Effekt in allen Browsern sehen können. Der Screenshot lautet wie folgt: (Screenshots sollten hier eingefügt werden)

Ich stelle diese Frage jetzt, weil ich gesehen habe, wie Jonnie Hallman sie im Blog wieder erwähnt hat. Er erwähnte es im Mai als ein großes kleines Detail. In einigen Schnittstellen ist das Scrollen von Schatten viel Sinn.

Rückblickend dachte ich an eine Lösung, die derzeit funktioniert und mit Scroll -Ereignissen funktioniert. Wenn der Bildlaufbereich scrollt ist, werden die oberen und linken Schatten angezeigt. Wenn der Bildlaufbereich nicht vollständig scrollt, werden die unteren und rechten Schatten angezeigt. In diesem Sinne habe ich den einfachsten, direktesten und am wenigsten klugen Ansatz ausprobiert, bei dem ich leere Divs oben, rechts, unten und links im Scrolling -Bereich platzieren soll. Ich nenne diese "Kanten" und beobachte sie mit der Schnittstelle Observer API. Wenn sich eine Kante nicht mit dem Bildlaufbereich überschneidet, kann ich davon ausgehen, dass die Kante gescrollt ist und ein Schatten dieser Kante angezeigt werden kann. Sobald sich die Kanten überschneiden, kann ich davon ausgehen, dass der Bildlaufbereich den Rand des Scrollens erreicht hat, damit ich diesen Schatten verbergen kann.

clever! Leider gibt es keine Online -Demo, sondern lesen Sie den Artikel für weitere Informationen zur Implementierung.

Andere auf JavaScript-basierte Beispiele

Aber ich denke, wenn Sie dies tun möchten, sollten Sie die IntersectionObserver -Methode auswählen. Hoffentlich kann ich sehen, wie jemand die besten Teile dieser Ideen zusammenstellt (Hinweise auf).

Das obige ist der detaillierte Inhalt vonScrollen Sie Schatten mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!