Woran erkennt man, dass eine Seite (oder ein beliebiges Element auf dieser Seite) scrollbar ist? Nun, wenn sie eine Scrollleiste hat, ist das ein ziemlich guter Hinweis. Man muss sich vielleicht immer noch mit seinem Kunden über „den Fold“ oder was auch immer herumschlagen, aber ich glaube nicht, dass jemand verwirrt ist, was eine Scrollleiste ist oder was sie anzeigt.
Aber nehmen wir an, es gibt keine Scrollleiste. Das ist sehr häufig. macOS blendet Scrollleisten standardmäßig aus und zeigt sie nur während des Scrollens an. Die meisten mobilen Browser haben keine Scrollleisten, selbst wenn Sie versuchen, sie mit etwas wie overflow: scroll; zu erzwingen.
Warum ist das wichtig? Wenn Sie nicht wissen, dass ein Bereich scrollbar ist, könnten Sie wichtige Inhalte oder Funktionen verpassen.
Ich denke regelmäßig an die Perfectly Cropped Geschichte von Tyler Hall. Es gibt einen Bildschirm unter iOS, der wichtige Funktionen enthält, zu denen Sie nach unten scrollen müssen, aber es gibt keinerlei Hinweis darauf, dass Sie dort scrollen *können*.
Das Ergebnis war, dass Tylers Mutter buchstäblich die Funktionalität, die sie gewohnt war, nicht finden konnte. Nicht gut.
Es gibt einen aufwändigen Weg, sichtbare Scrollleisten zu erkennen und sie sichtbar zu erzwingen, aber irgendetwas daran stört mich. Es respektiert nicht die Präferenz eines Benutzers (vorausgesetzt, es *ist* die Präferenz des Benutzers), erfordert DOM-Manipulationstests und verwendet herstellerspezifisches CSS (das wahrscheinlich lange Bestand haben wird, aber jetzt standardisiert wurde, also vielleicht nicht für immer).
Ich mag diese Ansätze und die Denkweise von Chris Smith
Meine Favoriten sind die schattenbasierten Techniken. Für mich ist ein Innen-Schatten ein sehr klares Indiz, da er den Eindruck erweckt, dass Inhalte darunter fließen, und der Schatten einem Rand folgt, der darauf hinweist, dass man in diese Richtung scrollen kann. Außerdem haben Sie dort CSS-Kontrolle, so dass ich denke, es könnte sich relativ leicht an jede UI-Situation anpassen, in der Sie sich befinden.
Man sollte jedoch wissen, dass es vollständig in CSS möglich ist, kein JavaScript, und einer der großartigen CSS-Tricks ist.
Hallo! Danke für die schönen Beispiele. Ich glaube, es gibt einen Tippfehler und der Name der Callback-Funktion für Beispiel 5 muss geändert werden.
Persönlich mag ich den hüpfenden Pfeil, der mich auffordert, nach unten zu scrollen, den man auf einigen modernen Websites sieht. Der Innen-Schatten schreit meiner Meinung nach nicht so laut „scroll mich“ wie ein hüpfender Pfeil.
Das ist fair. Aber ich bin sicher, Sie können sich vorstellen, dass eine ganze Website (oder ein ganzes Betriebssystem) voller hüpfender Pfeile zu viel sein könnte.
Die Schattenoptionen sind nett, aber wenn man unten angekommen ist, würde man erwarten, dass der Schatten verschwindet. Man würde in diesem Fall auch einen Schatten oben erwarten.
Oder man würde erwarten, dass der Schatten verschwindet, wenn man zu scrollen beginnt, und dann davon ausgehen, dass der Benutzer weiß, dass er scrollen kann. Vielleicht kann der Schatten bei jedem neuen Seitenaufruf wieder erscheinen.
genau so funktionieren Scroll-Schatten
Schöner Artikel, aber Sie haben die Funktion „setFade“ zweimal definiert, sodass das Scrollen zum Ende des vierten Beispiels den Callback des fünften Beispiels auslöst – dachte nur, Sie würden das vielleicht wissen wollen!
Ich möchte nur öffentlich die Überschrift dieses Beitrags würdigen.
Das ist alles.