CSS-Scroll-Snap ermöglicht Websites, die Webseite oder einen anderen Scroll-Container an einer bestimmten Scroll-Position auszurichten, wenn der Benutzer einen Scroll-Vorgang durchführt. Diese Funktion wurde wird in allen modernen Browsern unterstützt seit über zwei Jahren, aber viele Websites, die davon profitieren könnten, verwenden es immer noch nicht.
Scroll Snapping wird wahrscheinlich am ehesten mit horizontalen Karussells in Verbindung gebracht (vgl Chris' Nur-CSS-Ansatz) und bestimmte Webseiten, die in Vollbildfolien unterteilt sind. Aber warum dort aufhören? Ich glaube, dass Snapping das Scrollerlebnis auf jeder Webseite verbessern kann, die Elemente in einem Raster oder Feed anordnet.
Beispielsweise zeigen die meisten Shopping-Websites Produkte in einem Raster. Idealerweise möchte der Benutzer mit minimalem Aufwand zwischen den Rasterreihen springen. Der Benutzer kann drücken Raumfahrt um die Seite um ungefähr einen Bildschirm (Ansichtsfensterhöhe) zu scrollen, aber abhängig von der Höhe der Rasterzeilen wird die Scroll-Position irgendwann „nicht mehr synchron“ mit dem Raster, und der Benutzer muss sie manuell neu anpassen.
Wenn wir dieser Seite Scroll-Snapping hinzufügen, kann der Benutzer mit konsistent zur nächsten Zeile scrollen Raumfahrt Taste (drücken Shift + Raumfahrt scrollt zur vorherigen Zeile). Es ist ziemlich mühelos.
Ich denke, dass Scroll-Snapping eine willkommene Ergänzung zu dieser Website wäre. Und es ist nicht einmal so kompliziert zu implementieren. Der CSS-Code, den ich für dieses Beispiel verwendet habe, ist relativ einfach:
html {
scroll-snap-type: y proximity;
}
.product-item {
scroll-snap-align: start;
scroll-margin-top: 75px; /* height of web page’s sticky header */
}Sie müssen nicht warten, wenn eine Website, die Sie regelmäßig besuchen, Scroll-Snapping noch nicht hinzugefügt hat und Sie glauben, dass dies Ihr Scroll-Erlebnis verbessern würde. Sie können Scroll-Snapping selbst hinzufügen – mit Benutzerstilen.
Hinzufügen von Benutzerstilen zu Websites
Im obigen Video können Sie sehen, dass ich in den erweiterten Einstellungen von Safari eine user.css-Datei ausgewählt habe. Diese Datei ist ein Benutzer-Stylesheet. Es enthält CSS-Stile, die ich geschrieben habe und die in einer lokalen Datei gespeichert sind .css Datei und zu Safari hinzugefügt. Diese „Benutzerstile“ werden dann auf jede Webseite angewendet, die ich in Safari öffne.
Chrome und Firefox erlauben Benutzern nicht, ein Benutzer-Stylesheet auszuwählen. Firefox unterstützte eine ähnliche Funktion namens userContent.css in der Vergangenheit, aber diese Funktion war veraltet und standardmäßig deaktiviert im Jahr 2019. Ich empfehle die Stylus-Browsererweiterung für diese beiden Browser (und andere Chromium-basierte Browser).
Ein wesentlicher Vorteil von Stylus besteht darin, dass Sie Benutzerstile für bestimmte Websites und URLs schreiben können. Das Benutzer-Stylesheet von Safari gilt für alle Websites, aber dies kann umgangen werden, z. B. durch die Verwendung des neuen :has() Pseudo-Klasse zu Erstellen Sie Selektoren, die nur mit bestimmten Websites übereinstimmen.
Das CSS Cascading-Modul definiert a Herkunft des Benutzers für Stile, die der Benutzer hinzufügt. Das Benutzer-Stylesheet von Safari gehört zu diesem Ursprung, aber die Stylus-Erweiterung fügt Benutzerstile in den Autorenursprung ein, wo sich die Stylesheets der Website befinden. Insbesondere fügt Stylus Benutzerstile über a direkt in die Seite ein <style> Element am Ende von <html> was es zu dem macht letztes Stylesheet auf der Seite. Technisch bedeutet dies, dass über Stylus hinzugefügte Stile als Autorenstile klassifiziert werden, da sie nicht im Benutzerursprung enthalten sind, aber ich werde sie weiterhin Benutzerstile nennen, weil der Benutzer sie hinzufügt.
Es lohnt sich jedoch, diese Unterscheidung im Auge zu behalten, da sie die Kaskade betrifft. Wenn die Selektorspezifität gleich ist, ist ein echter Benutzerstil schwächer als der eigene Stil der Seite. Dies macht Benutzerstile zu einem hervorragenden für Benutzervorgaben geeignet. Unter den gleichen Bedingungen ist ein per Stylus hinzugefügter Stil stärker als der Stil der Seite, sodass Stylus nicht so einfach zum Definieren von Benutzervorgaben verwendet werden kann.
Wenn wir hinzufügen !important Außerdem sind sowohl echte Benutzerstile als auch über Stylus hinzugefügte Stile stärker als die Stile der Seite. Wenn Sie also Ihre Benutzerstile auf einer Website durchsetzen möchten, spielt es keine Rolle, ob Sie die „Stylesheet“-Option von Safari oder die Stylus-Erweiterung verwenden. Dein !important Stile werden so oder so gewinnen.
Im nächsten Abschnitt werde ich eine Reihe von verwenden !important Benutzerstile, um das Einrasten des Bildlaufs auf der Timeline-Seite der Twitter-Website zu erzwingen. Mein Ziel ist es, das Lesen meiner Twitter-Timeline zu beschleunigen, indem ich unangenehme Scroll-Positionen vermeide, bei denen der oberste Tweet nur teilweise auf dem Bildschirm zu sehen ist.
Scroll Snap für Twitters Timeline
Nach einigem Experimentieren habe ich mich für den folgenden CSS-Code entschieden. Diese Stile funktionieren gut in Firefox, aber ich habe einige Probleme in Chrome und Safari festgestellt. Ich werde diese Probleme später in diesem Artikel ausführlicher beschreiben, aber jetzt konzentrieren wir uns auf das Verhalten in Firefox.
html {
scroll-snap-type: y mandatory !important;
}
/* tweets in the timeline are <article> elements */
article {
scroll-snap-align: start !important;
}
/* un-stick the sticky header and make it “snappable” as well */
[aria-label="Home timeline"] > :first-child {
position: static !important;
scroll-snap-align: start !important;
}
/* hide the “new Tweets available” floating toast notification */
[aria-label="New Tweets are available."] {
display: none !important;
}Es ist notwendig, hinzuzufügen !important zu jeder Deklaration, da alle Benutzerstile die eigenen Stile der Webseite für sich gewinnen müssen, damit unsere benutzerdefinierte Scroll-Snapping-Implementierung korrekt funktioniert. Das wünsche ich mir, anstatt immer wieder zu schreiben !important, ich könnte meine Benutzerstile einfach in eine „wichtige Ebene“ einfügen, aber eine solche CSS-Funktion existiert nicht (noch).
Sehen Sie sich das Video unten an, um meine Scroll-Snap-Benutzerstile in Aktion zu sehen. Beachten Sie, wie jeder Druck auf die Raumfahrt scrollt die nächste Gruppe von Tweets in die Ansicht, und der erste Tweet jeder Gruppe wird am oberen Rand des Ansichtsfensters ausgerichtet. Dadurch kann ich meine Chronik schneller lesen. Wenn ich zu den vorherigen Tweets zurückkehren muss, kann ich drücken Shift + Raumfahrt.
Was ich an dieser Art des Scroll-Snappings mag, ist, dass ich vorhersagen kann, wie weit die Seite scrollen wird, wenn ich drücke Raumfahrt. Jede Scroll-Distanz entspricht den kombinierten Höhen der sichtbaren Tweets, die vollständig auf dem Bildschirm angezeigt werden. Mit anderen Worten, der teilweise sichtbare Tweet am unteren Bildschirmrand wird an den oberen Bildschirmrand verschoben, was genau das ist, was ich möchte.
Space scrollt Daves Tweet an den oberen Rand des Bildschirms.Führen Sie die folgenden Schritte aus, um meine Scroll-Snap-Benutzerstile auf Ihrer eigenen Twitter-Timeline auszuprobieren:
- Installieren Sie das Stiftverlängerung mit Firefox-Add-ons oder dem Chrome Web Store.
- Navigieren Sie zu Ihrer Twitter-Chronik unter https://twitter.com/home.
- Klicken Sie auf das Stylus-Symbol in der Symbolleiste des Browsers und klicken Sie im Popup-Fenster auf „diese URL“.
- Stylus öffnet einen Code-Editor in einem neuen Browser-Tab. Kopieren Sie meine Scroll-Snap-Benutzerstile, fügen Sie sie in den Editor ein und klicken Sie auf die Schaltfläche Speichern in der Seitenleiste auf der linken Seite. Die Stile werden sofort auf Ihre Twitter-Timeline angewendet (kein erneutes Laden der Seite erforderlich).
- Sie können die Stile jederzeit aktualisieren. Klicken Sie auf das Stiftsymbol und das Stiftsymbol, um den Editor erneut zu öffnen.
Das Einrasten kann nicht überschrieben werden
Meine Implementierung von Scroll-Snapping für die Twitter-Timeline hat einen großen Fehler. Wenn ein Tweet größer als der Darstellungsbereich ist, ist es unmöglich, die Seite zu scrollen, um den unteren Teil dieses Tweets anzuzeigen (z. B. wenn Sie diesen Tweet liken oder retweeten möchten), da der Browser die Seite zwangsweise einrastet, um den oberen Teil anzuzeigen Tweet (oder die Spitze des folgenden Tweets).
Der Schweregrad dieses Problems hängt von der Anzeige des Benutzers ab. Wenn Sie die Chronik von Twitter auf einem großen Desktop-Monitor mit einem kleinen Seiten-Zoomfaktor betrachten, werden Sie möglicherweise keine Tweets sehen, die größer als der Darstellungsbereich sind.
Ich habe die CSS-Arbeitsgruppe gefragt, ob es möglich wäre, einen Mechanismus hinzuzufügen, der es dem Benutzer erlaubt Überschreiben Sie das obligatorische Scroll-Snapping des Browsers. Ich sollte wahrscheinlich erwähnen, dass dieses Problem zumindest theoretisch durch einen Wechsel von gelöst werden könnte mandatory zu proximity schnappen. Ich habe getestet proximity Snapping in Chrome und Firefox, und ich fand es inkonsistent und verwirrend. Der Browser brach oft ab, wenn ich es nicht erwartet hatte, und umgekehrt. Vielleicht stört der Code von Twitter die proximity Algorithmus, die Browser sind noch etwas fehlerhaft, oder vielleicht „scrolle ich einfach falsch“, falls das überhaupt möglich ist. Ich weiß nicht.
Aber der Hauptgrund, warum ich ging mit mandatory Snapping ist, dass ich Situationen vermeiden wollte, in denen der oberste Tweet nach einem Scrollen nur teilweise auf dem Bildschirm ist. Die Art des schnellen Scrollens zwischen Tweet-Sätzen, die ich im obigen Video gezeigt habe, ist nur mit möglich mandatory schnappen.
Wenn Sie, wie ich, bevorzugen mandatory Schnappen, ich kann die folgenden zwei Problemumgehungen für das Problem des „großen Tweets“ vorschlagen:
- Sie können den Tweet auf einer eigenen Seite öffnen und danach zur Timeline zurückkehren.
- Wenn Sie nur auf die Schaltflächen „Gefällt mir“ oder „Retweet“ klicken möchten, können Sie dies tun Shift-Klicken Sie auf den Tweet, um ihn auszuwählen, und drücken Sie dann L es mögen, oder T gefolgt von Enter um es zu retweeten.
Probleme in Chrome und Safari
Meine Scroll-Snap-Benutzerstile erzeugen deutlich unterschiedliche Scroll-Snap-Verhalten in Chrome, Safari und Firefox. Diese Unterschiede sind zum Teil darauf zurückzuführen, dass es sich um die genaue Implementierung des Schnappmechanismus handelt dem Browser überlassen:
Das CSS-Scroll-Snap-Modul gibt absichtlich keine präzisen Animationen oder Physik vor, die zur Erzwingung von Snap-Positionen verwendet werden; dies bleibt dem Benutzeragenten überlassen.
Die aktuelle Version von Safari hat einen Fehler, der verhindert, dass Scroll-Snapping auf der Twitter-Timeline richtig funktioniert. Ich habe diesen Fehler gemeldet.
In Chrome bin ich auf folgende Probleme gestoßen:
- Die Bildlaufvorgänge werden uneinheitlich animiert. Manchmal ist die Animation langsam, manchmal sofort, und manchmal beginnt sie langsam, wird dann aber abgebrochen. Ich fand das irritierend.
- Die Scroll-Operationen animieren generell zu langsam. Ich habe einen Test in Chrome und Firefox (20 Raumfahrt drücken), und ich brauchte 70 % mehr Zeit, um die gleiche Strecke auf meiner Twitter-Timeline in Chrome zurückzulegen als in Firefox (18.5 Sekunden in Chrome gegenüber 11 Sekunden in Firefox).
- Wenn ich mit dem Trackpad meines Laptops scrolle, flackert die Seite stark. Wenn ich versuche, schnell zu scrollen, indem ich die Taste gedrückt halte Raumfahrt Taste scrollt die Seite sehr langsam und oszilliert. Ich vermute, dass beide Probleme durch denselben Algorithmus verursacht werden. Es scheint, dass Chrome in diesen Fällen mit einer sehr hohen Rate neu einrastet. Ich habe diesen Fehler gemeldet.
Diese Browserfehler und Unterschiede zwischen Browsern können ein Problem für Websites darstellen, die die Implementierung von Scroll-Snapping in Betracht ziehen. Beispielsweise kann sich ein Webentwickler zurückhalten, weil ihm das Scroll-Snapping in einem bestimmten Browser nicht gefällt. Browser können dieses Problem entschärfen, indem sie interoperabler werden. Tatsächlich ist Scroll Snap einer der Schwerpunkte des Cross-Browsers Interop 2022-Bemühungen.
Eine andere Möglichkeit, die Situation zu verbessern, besteht darin, neue CSS-Eigenschaften einzuführen, die das Scrollen besser konfigurierbar machen würden. Dies könnte die Dauer der Fanganimation, die Länge des Näherungsschwellenwerts für das Fangen und einen Mechanismus zum Überschreiben des obligatorischen Fangens umfassen.
Schnappen oder nicht schnappen?
Ich verwende meine Scroll-Snap-Benutzerstile seit ein paar Wochen auf der Twitter-Timeline und möchte nicht zurückgehen. Die Möglichkeit, schnell durch meinen Feed zu blättern, nur mit der Raumfahrt Schlüssel ist nur auf einer anderen Ebene.
Ich halte dies jedoch für eine erweiterte Funktion, die wahrscheinlich nicht jedermanns Sache ist. Es gibt einen Grund, warum ich es nur auf der Timeline aktiviert habe (/home Pfad) und nirgendwo sonst auf der Twitter-Website. Das Einrasten ist eine erhebliche Änderung beim Scrollen der Seite, und es dauert einige Zeit, sich daran zu gewöhnen. Es kann für einen bestimmten Anwendungsfall großartig funktionieren, aber es kann auch im Weg stehen und den Benutzer frustrieren.
Websites mit Feeds sollten daher nach sorgfältiger Überlegung und zahlreichen Tests in verschiedenen Browsern und mit unterschiedlichen Eingabemethoden (Maus, Tastatur, Trackpad, Touchscreen usw.) in Betracht ziehen, Scroll-Snapping nur als optionale Funktion anzubieten.
Bevor du gehst…
Abschließend empfehle ich dringend, die zu installieren und auszuprobieren Stylus-Browsererweiterung. Webentwickler (oder jeder, der sich mit CSS auskennt) haben die Möglichkeit, jede Website in ihrem Browser zu gestalten. Sie können kleinere Verbesserungen und Korrekturen auf Ihre bevorzugten Websites anwenden. Ich verwende es hauptsächlich, um Seitenelemente auszublenden, die ich als störend empfinde, wie z. B. klebrige Kopfzeilen, Video-Popups und Stimmenzählungen.
Aber was noch wichtiger ist, mit Stylus können Sie schnell neue CSS-Funktionen auf jeder Website testen und bei Bedarf Browserfehler melden. Auf diese Weise können Sie dazu beitragen, die Webplattform ein wenig besser zu machen.
