Bevor dieses neue CSS, das ich einführen werde, existierte, war das Sperren eines Elements beim Scrollen im Viewport mit etwas JavaScript verbunden. Wie Sie vielleicht wissen, hat JavaScript einen wohlverdienten Ruf dafür, knifflig zu sein, wenn es mit Scroll-Verhalten kombiniert wird.
Die neue CSS Scroll Snap Points Spezifikation verspricht Abhilfe und ermöglicht Verhaltensweisen dieser Art mit sehr wenigen Zeilen CSS.
Wie bei brandneuer Webtechnologie üblich, hat sich diese Spezifikation im Laufe der Zeit verändert. Es gibt „alte“ und „neue“ Eigenschaften und Werte. Vielversprechend ist sie aber dennoch, da die Unterstützung rasant zugenommen hat. Ich zeige Ihnen, wie Sie in dieser Übergangsphase die breiteste Unterstützung erzielen.
Polyfilled Demo
Die untenstehende Demo hat horizontale Scroll-Möglichkeit. Sie ist responsiv: Jedes „Panel“ hat die Breite und Höhe des Viewports (dank vh und vw Einheiten).
Sie verwendet ein Polyfill, aber um es nutzen zu können (und die Unterstützung ist noch gering genug, dass ich es empfehle), müssen Sie die „alten“ Werte unterstützen, weshalb ich auch diese behandeln werde.
Sehen Sie den Pen Simple Responsive Scroll Snap Point Demo von CSS-Tricks (@css-tricks) auf CodePen.
- Wenn Sie in Firefox schauen: Es hat die beste aktuelle Unterstützung, sodass Sie am klarsten sehen können, wie das native Verhalten aussieht und sich anfühlt.
- Wenn Sie in Chrome oder Opera schauen: Es gibt keine Unterstützung, daher ist jedes Verhalten, das Sie in diesen Browsern bemerken, ausschließlich dem Polyfill zuzuschreiben.
- Wenn Sie in Edge oder IE schauen: Wahrscheinlich wird es gar nicht funktionieren. Diese Browser haben teilweise Unterstützung, aber anscheinend nicht genug, um dies zum Laufen zu bringen.
- Wenn Sie auf einem mobilen Gerät schauen: iOS 9 unterstützt es (getestet auf einem iPhone 6), aber ich habe gesehen, dass das Easing-Verhalten ziemlich seltsam war. Keine Chrome/Android-Unterstützung, aber das Polyfill greift und handhabt es ziemlich gut (getestet auf einem Android Nexus 6).
Beachten Sie, dass ich Autoprefixer im Pen verwende, um mir automatisch alle notwendigen Vendor-Präfix-Eigenschaften geben zu lassen.
Hier ist der Code, mit dem die Magie entsteht
.scroller {
scroll-snap-type: x mandatory;
/* older spec implementation */
scroll-snap-destination: 0% 100%;
scroll-snap-points-x: repeat(100%);
}
.page {
scroll-snap-align: start;
}Ziemlich schlank! Lassen Sie uns diese Eigenschaften eine nach der anderen aufschlüsseln.
Aktuelle CSS Scroll Snap Eigenschaften
scroll-snap-type
scroll-snap-type: none | mandatory | proximity; Ein mandatory Wert bedeutet, was Sie vielleicht erwarten: Dass das Element zwangsweise auf einem Snap-Punkt zur Ruhe kommt, auch wenn keine aktiven Scroll-Aktionen ausgeführt werden. Wenn der Inhalt irgendwie geändert oder aktualisiert wird, findet die Seite den Snap-Punkt wieder.
Der proximity Wert ist mandatory ähnlich, aber weniger streng. Wenn die Browsergröße geändert wird oder Inhalte hinzugefügt werden, wird der Snap-Punkt möglicherweise wieder gefunden oder auch nicht, je nachdem, wie nah er an einem Snap-Punkt liegt.
Nachdem ich damit herumgespielt habe, scheint mandatory derzeit häufiger in Browsern unterstützt zu werden und ein konsistenteres Verhalten zu zeigen.
scroll-snap-align
scroll-snap-align: [none | start | end | center] [none | start | end | center]; Diese Eigenschaft bezieht sich darauf, wie der Scroll-Snap-Rand eines Elements mit seinem übergeordneten Scroll-Container ausgerichtet wird. Sie verwendet zwei Werte, x und y, und wenn Sie nur einen Wert verwenden, wird er als Kurzschreibweise gelesen und für beide Werte wiederholt (ähnlich wie bei Padding, wo padding: 10px; gleich padding: 10px 10px 10px 10px; ist). Diese Eigenschaft ist nicht animierbar.
scroll-snap-paddingscroll-padding
Achtung, scroll-snap-padding wurde umbenannt in scroll-padding.
scroll-snap-padding: <length> | <percentage>;
scroll-padding: <length> | <percentage>;Diese Eigenschaft bezieht sich auf den Scroll-Container im visuellen Viewport. Sie funktioniert ähnlich wie normales Padding, mit der gleichen Art von Wertreihenfolge. Zum Beispiel würde scroll-padding: 75px 0 0; ein Top-Padding von 75px und alle anderen 0 bedeuten. Diese Eigenschaft ist animierbar, wenn Sie also die Scroll-Snap-Ausrichtung verschieben möchten, wäre dies ein guter Weg.
Ältere CSS Scroll Snap Eigenschaften
Wie erwähnt, hat sich die Spezifikation im letzten Jahr rasant verändert, und es gibt bereits Eigenschaften, die als veraltet gelten, aber aus Gründen der Legacy-Unterstützung immer noch gut zu kennen sind.
scroll-snap-points
scroll-snap-points-<x or y>: none | repeat(<length>);
scroll-snap-point bezieht sich auf die Achse, die die Richtung des Scrollens bestimmt. Im ersten Pen, den wir gesehen haben, ist diese Eigenschaft auf der x-Achse gesetzt. Hier haben wir sie auf der y-Achse (da es sich um ein vertikales Scrollen handelt) mit scroll-snap-points-y: repeat(100%);. Die Prozentsätze beziehen sich auf den Padding-Bereich dessen, was Sie als Scroll-Container definiert haben.
Sehen Sie den Pen Simple Scroll Snap Points von Sarah Drasner (@sdras) auf CodePen.
scroll-snap-destination
Diese Eigenschaft und scroll-snap-coordinate sind sich in Bezug auf die Werte sehr ähnlich. Während sich scroll-snap-destination auf das übergeordnete Element bezieht, bezieht sich scroll-snap-coordinate auf das *Element* selbst. Sie benötigen möglicherweise nur scroll-snap-destination, wenn der Snap-Punkt rein durch das Element und nicht durch den Container, in dem es sich befindet, bestimmt wird.
scroll-snap-destination: <position>;Diese Eigenschaft ermöglicht es Ihnen, festzulegen, an welchem Punkt im Viewport das Scrollen stoppen soll. Sagen wir zum Beispiel, Sie möchten Ihren Inhalt um 100 Pixel verschieben, sodass ein Panel neben einem anderen hervorgehoben wird. Die folgende Abbildung zeigt, wie die Scroll-Snap-Destination es Ihnen ermöglicht, diesen Parameter einfach anzupassen.
Wenn als Prozentsatz definiert, bezieht sich der Punkt auf die Breite und Höhe des Scroll-Containers.
scroll-snap-coordinate
Scroll-snap-coordinate: none | <position>;Diese Eigenschaft ermöglicht es Ihnen anzugeben, wohin das Scrollen zu einem Element erfolgen soll. Der Positionsbetrag bezieht sich auf die Borderbox des Elements. Möglicherweise benötigen Sie sie nicht, es sei denn, Sie führen etwas ziemlich Ausgefallenes durch. scroll-snap-coordinate ist der einzige Wert, der auf alle Elemente auf der Seite angewendet werden kann, alle anderen Scroll-Snap-Eigenschaften gelten nur für Scroll-Container.
Diese letzten beiden Eigenschaften, scroll-snap-destination und scroll-snap-coordinate, sind **animierbare** Eigenschaften, während scroll-snap-type und scroll-snap-points —
Weitere Ressourcen
- CSS Scroll Snap Points Module Level 1 Arbeitsentwurf
- MDN Referenz
- WebKit Blogbeitrag
- CodePen Sammlung
Browser-Unterstützung
Diese Daten zur Browserunterstützung stammen von Caniuse, das weitere Details enthält. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 69 | 68 | 11* | 79 | 11 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 127 | 11.0-11.2 |
Fazit
Zum Zeitpunkt dieses Beitrags wurde die Spezifikation vor etwa einem Monat aktualisiert und ist noch in Bewegung. Die Unterstützung ist noch nicht allgegenwärtig, aber selbst wenn Sie die älteren Werte berücksichtigen müssen, die das Polyfill benötigt, ist der Code, um dies zum Laufen zu bringen, klein und nett. Es ist unglaublich spannend zu sehen, was in CSS auf uns zukommt, und wenn Sie Experimente durchführen, lassen Sie es die Spezifikationsautoren wissen, was Sie tun und was Sie finden – es beeinflusst, woran sie arbeiten. Ich bin mir noch nicht sicher, ob ich so etwas in der Produktion verwenden würde. Es würde davon abhängen, wie bereitwillig Sie bereit sind, an diesem Code zu iterieren, wenn sich die Dinge in Zukunft ändern. In der Zwischenzeit leistet das Polyfill jedoch ziemlich gute Arbeit und es ist aufregend, diese Art von Funktion in CSS zu sehen.
Hallo.
So cool es auch ist, ich glaube nicht, dass diese Funktion „kommt“.
Ich denke, sie wurde entfernt (depreziert), bevor sie überhaupt eingeführt wurde.
Bitte klicken Sie auf den von Ihnen bereitgestellten MDN-Link und lesen Sie die rote „Deprecated“-Meldung oben.
Hallo,
Ich denke, das bezieht sich nur auf die Eigenschaft „scroll-snap-points-x“ und nicht auf das gesamte Modul, oder?
Bitte klicken Sie auf den Link zur Spezifikation, den wir bereitgestellt haben, und sehen Sie
…was sehr aktuell ist und meiner Meinung nach ein guter Indikator dafür, dass dies voranschreitet.
Ich werde diesen MDN-Link aktualisieren, um auf ein relevanteres Untermerkmal zu verweisen, da dieser Link tatsächlich eine der „alten“ Eigenschaften zu sein scheint.
Ich hatte ihn mit dem üblichen Link aktualisiert, aber etwas wurde rückgängig gemacht, jetzt ist es behoben! Hier ist der Link, den wir meinten: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap_Points.
Diese vollständige Spezifikation ist nicht depreziert, sondern sie wurde in eine andere Implementierung verschoben. Im Artikel behandle ich dies und auch, warum es in dieser Übergangszeit immer noch wertvoll ist, sich einige dieser alten Eigenschaften anzusehen – hauptsächlich, weil das Polyfill sie immer noch verwendet.
Die Spezifikation könnte sich in Zukunft nochmals ändern, aber glücklicherweise ist selbst die Unterstützung der alten Werte nicht viel Code, um viel zu erreichen.
Wann werden Entwickler lernen, das Scrollen dem Benutzer zu überlassen? Ich schließe sofort jede Seite, die mich aus irgendeinem Grund scrollt. Wenn Sie möchten, dass es zum nächsten Bereich „schnappt“, stellen Sie einen Pfeil zum Anklicken bereit. **Ändern Sie keine Standardverhalten**.
Beispiel, warum diese Funktionalität absolut schrecklich ist
Ich verwende einen vertikalen Monitor. Der Inhalt ruht oft, wenn nicht immer, zu hoch oder zu niedrig. Mit dieser Funktionalität kann ich ihn nicht bequem positionieren, weil ein Entwickler für mich entschieden hat, wie weit ich scrollen kann. Ich deaktiviere entweder CSS, um ihren Inhalt zu lesen (als ob ich mir die Mühe machen würde?) oder ich ertrage das unbequeme Lesen (Hinweis: werde ich nicht).
Für alle, die dieses Verhalten auf ihren Websites hinzufügen möchten: Denken Sie an Ihre Benutzer! Bieten Sie es als Alternative an, für die Benutzer sich *entscheiden* müssen (z. B. durch Klicken auf einen Pfeil nach links/rechts) und BRECHEN SIE NICHT DIE STANDARDS.
Hey Nadya, ich stimme Ihnen absolut zu, aber ich denke, es kommt tatsächlich auf die Entwickler an, die die Lösung implementieren, und nicht darauf, etwas für Hochformat zu berücksichtigen, sondern nur für das traditionelle Querformat.
Mit der richtigen Implementierung kann es funktionieren, aber in den meisten Fällen ist das, was Sie erleben, korrekt. Dies gilt jedoch auch für jede CSS-Funktion.
Ich sehe beide Seiten.
Ich befürchte, diese Argumentation wird ein wenig dogmatisch.
Schließlich ist, was ein Standard-Scrollverhalten ist, wenn nicht das, was der Browser bereitstellt? Und dies ist ein Scrollverhalten, das der Browser bereitstellt (oder bald bereitstellen wird).
Es ist eher so: „Man mag es, wenn es gut gemacht ist, und hasst es, wenn es nicht gut gemacht ist.“
„Elastisches Scrollen“ war nicht immer eine Sache. Nicht jeder mochte es, aber die meisten Leute schon und die meisten Leute lassen es einfach liegen. Sie holen nicht das Argument „niemals das Scrollen ändern, nie!!“ hervor.
Diese Demos bewegen sich für mich an der Grenze, je nach Erfahrung. Die erste Demo in Desktop-Chrome fühlt sich für mich irgendwie nicht gut an. Sie fühlt sich irgendwie gekapert und voreingenommen an, wo sie scrollen sollte. Aber dieselbe Demo in Firefox fühlt sich VIEL besser an. Und ich kann mir vorstellen, dass auf einem gut unterstützten mobilen Browser, ein paar Iterationen später, dies so reibungslos und angenehm sein wird wie elastisches Scrollen.
@Damian
Das ist Teil des Problems, aber es ist eines, an das ich persönlich gewöhnt bin. Viele, viele Websites brechen für meine „etwas breitere als ein Tablet“-Bildschirmgröße. Ich weiß das, erwarte das und arbeite mich generell darum herum (ich benutze Stylish, um das CSS jeder Website zu ändern, die ich regelmäßig besuche/lese)
Ich hatte immer noch das Problem „Text nicht ganz da, wo ich ihn gerne lesen würde“, mit genau derselben Funktionalität, aber implementiert in JS statt CSS in Querformat-Ansichten. Ein großer Teil des Problems ist das Nicht-Testen, wie gut es für verschiedene Fenstergrößen funktioniert, aber es kann niemals berücksichtigen, *wo* die Leute es vorziehen zu lesen.
Ich lese gerne, wenn der Text etwa 1/5 unter meinem Monitor beginnt. Andere bevorzugen ihn genau in der Mitte. Andere scrollen weiter nach unten, während sie die letzte Zeile lesen. Wenn Sie das Scrollen für diese Benutzer diktieren, bedienen Sie niemanden mehr und brechen aktiv deren Erfahrung.
Ich setze das absichtliche Wegnehmen der Kontrolle vom Benutzer nicht gleich mit dem Scheitern, für jede mögliche Bildschirmgröße zu codieren. Fast das einzige andere UX-brechenende CSS-Feature, das mir einfällt, sind benutzerdefinierte Cursor. Glücklicherweise haben die Leute aufgehört, diese zu verwenden.
@Chris
Mein Browser ermöglicht es mir, fast alles anzupassen, was ich möchte. Ich deaktiviere glattes Scrollen. Ich kann sogar die Scrollgeschwindigkeit ändern, sodass mein Browser genau so schnell scrollt, wie ich es möchte. Ich kann wählen, ob er beschleunigen oder konstant bleiben soll, während ich weiter scrolle.
Wenn ich diese auf eine andere Weise geändert haben wollte – ich würde sie selbst ändern. Nicht 10 verschiedene Arten zu scrollen auf 10 verschiedenen Websites, weil die Entwickler dachten, sie wüssten es besser als ich.
Es macht mir nichts aus, dass Smooth Scroll beliebter war als nicht. Solange es etwas ist, das ich deaktivieren kann, ist es mir egal, ob es für andere zum Standard gemacht wird. Der wichtige Teil ist, dass **ich die Kontrolle habe**.
Nur zur Info, ich breche auch von Websites ab, die Smooth Scrolling erzwingen. Es gibt kein „gut gemacht“. Es ist eine ärgerliche Erfahrung und keine, die ich mir antun möchte. Mir ist bewusst, dass ich Teil einer militanten Minderheit für Benutzerkontrolle bin.
Ich denke, das größte Problem beim Scroll-Jacking ist, dass es unabhängig von der beabsichtigten Bildschirmerfahrung für den Benutzer immer eine Hauptsache geben wird, die kein Browser oder Betriebssystem beheben kann: haptisches Feedback. Jeder, der eine Maus mit Scrollrad (oder ein Touchpad/Touchscreen oder einen anderen physischen Scrollmechanismus) verwendet, wird in einer bestimmten Richtung scrollen, wischen, drücken, ziehen und eine Echtzeit-Rückmeldung seiner Aktionen auf dem Bildschirm erwarten. Scroll-Jacking bricht dieses erwartete Feedback-Verhalten, indem es verändert, wie unsere physischen Interaktionen auf dem Bildschirm dargestellt werden.
Jede Funktion, die den Benutzer das Gefühl gibt, seine Hardware funktioniere nicht richtig, ist nichts, was ich sehen möchte. /rant
@Chuck Ich kann Ihnen nicht mehr zustimmen. Und das hat nichts damit zu tun, wie gut die Implementierung ist.
@Plopz So wahr. Das Vorhandensein dieser Funktion zeigt die übliche Scrollleiste, verhält sich aber nicht gleich. Erstellen Sie einfach eine neue Browserkomponente dafür und OK, ich könnte sie potenziell verwenden.
Zumindest in der Firefox-Implementierung überschreibt das Halten der Scrollposition für einen kurzen Moment die Snaps. Eine schnelle Scroll-Geste bewegt sich in Snaps, aber wenn Sie die Position halten, bleibt sie dort und respektiert Ihre gewünschte Scrollposition.
Ich weiß nicht wirklich, ob das Teil des Standards ist, aber wenn nicht, sollte es das sein.
Ich denke nicht, dass Scrollbalken das richtige UI-Element sind, um diese Art von Erfahrung zu steuern. Das Problem ist, dass der Scrollbalken sich nicht ändert, um anzugeben, was passieren wird. Vielleicht, wenn der Scrollbalken neu gestaltet würde, um die Breakpoints anzuzeigen. Aber diese Art von Verhalten scheint besser für Richtungsbuttons (Pfeile nach links, rechts) oder Indexbuttons (1,2,3,4,5…) geeignet zu sein.
Ich möchte im Moment jedes Scroll-Verhalten auf meiner Website vermeiden. Bis ich einige ausgefeilte Lösungen sehe, die in allen Browsern funktionieren und einen echten Anwendungsfall haben.
Vielen Dank,
HP
Ich muss zugeben, dass ich nicht begeistert bin, dass dies Realität wird. Es mag irgendwann akzeptabel sein, aber in der Zwischenzeit würde es wahrscheinlich zu noch ärgerlicheren Websites führen.
Hallo Sarah, möchtest du zum Polyfill beitragen?
Ich habe bereits einen PR von mir hinzugefügt: https://github.com/ckrack/scrollsnap-polyfill/pull/7
Es wäre großartig, wenn wir mit ckrack in Kontakt treten könnten, um ihn zu kontaktieren und zu sehen, ob er die PRs überprüfen kann.
Hallo Martin! Ja, unbedingt! Ich werde es mir am Wochenende ansehen. Wenn es aktualisiert wird, müssen wir die alten Werte nicht mehr unterstützen.
Danke
Ich würde es fast vorziehen, das Scrollen bei diesen Implementierungen zu deaktivieren und stattdessen eine Abschnittsnavigation hinzuzufügen. Ich war schon immer gegen jede Art von Scroll-Jacking, aber stellen Sie zumindest eine Navigation bereit, damit ich nicht warten muss, bis die Animation abgeschlossen ist, oder einen Abschnitt überspringen muss, weil ich zu viel gescrollt habe. Ich möchte meistens schnell durch eine Website gleiten. Dieses Feature wird immer vom gewünschten UX abhängen: „Möchte ich den Benutzer steuern oder ihn das Produkt steuern lassen? Wie viel Kontrolle sollte ich ihm geben?“ Alles in allem ist es großartig, dass eine Art Standard kommt.
Was ist, wenn (aus welchem Grund auch immer) der Benutzer zu einem Punkt zwischen den Snap-Punkten scrollen möchte? Jacke mein Scrollen nicht, Mann!
Sie müssen nicht „mandatory“ verwenden — Sie können auch „proximity“ verwenden. Ich habe für die Demo „mandatory“ verwendet, weil es besser unterstützt wird und die Fähigkeiten besser zeigt.
Ich verstehe aber im Allgemeinen, was Sie sagen, und warum Leute kritisch sind. Ich bin auch kritisch. Aber ich denke, es ist trotzdem wichtig, die Werkzeuge zu lernen, weil Sie vielleicht eines Tages einen Kundenanwendungsfall haben, und zu wissen, was Sie kritisch finden, ist sowieso nützlich, weil, wie in diesem Kommentar selbst gezeigt, es eine andere Arbeitsweise gibt :)
Ich bekomme 404 auf jedem Pen. Können Sie sie überprüfen?
Das tue ich nicht — können Sie bitte Ihre Verbindung überprüfen oder in einem anderen Browser?
Wow, die Seite gibt 404 aus, wenn Drittanbieter-Cookies deaktiviert oder etwas eingeschränkt sind. Was für ein verrücktes System ist das? Ich bin nicht mehr seit vielen Jahren in der Branche, aber ich dachte, 404 würde „Datei nicht gefunden“ bedeuten, nicht „Mann, ich brauche Cookies“. :)
Es gibt viele negative Kommentare hier, aber lassen Sie mich einen positiven Anwendungsfall dafür hinzufügen
Auf Mobilgeräten verwenden viele Apps ein Tab-Navigationsmodell mit horizontalem Scrollen zwischen Panels. Denken Sie zum Beispiel an Facebook Messenger. Mit Scroll-Snapping kann dieses Verhalten ohne JS implementiert werden.
Jesus, ich hoffe, das wird nie Realität.