{"id":461,"date":"2019-08-22T11:53:51","date_gmt":"2019-08-22T09:53:51","guid":{"rendered":"https:\/\/wiki.ad-libitum.info\/?page_id=461"},"modified":"2019-08-22T11:58:45","modified_gmt":"2019-08-22T09:58:45","slug":"scroll-snap","status":"publish","type":"page","link":"https:\/\/wiki.ad-libitum.info\/?page_id=461","title":{"rendered":"Scroll-Snap"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">CSS Scroll Snap: Neue L\u00f6sungen f\u00fcr Smartphones und Tablets<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">11. Juni 2019 09:02 von Dennis <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In diesem Artikel zeige ich dir, wie du\n die relativ neue CSS-Eigenschaft Scroll Snap dazu verwendest, um \nInhalte horizontal oder vertikal zu scrollen, Elemente einzurasten und \nsomit neue platzsparende L\u00f6sungen f\u00fcr Smartphones und Tablets \nentwickelst.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn du viel mit dem Smartphone oder Tablet surfst, dann wird \ndir diese Technik bestimmt schon h\u00e4ufiger aufgefallen sein. Du scrollst \ndurch eine Seite und auf einmal findest du einen horizontalen \nScrollbereich, in dem mehrere Leistungen, Teammitglieder oder Angebote \ndargestellt werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So wie hier:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"720\" style=\"aspect-ratio: 490 \/ 720;\" width=\"490\" autoplay controls loop src=\"https:\/\/wiki.ad-libitum.info\/wp-content\/uploads\/scroll-snap-demo-2.mp4.mp4\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Gerade bei sehr langen Seiten kann es eine angenehme \nAbwechslung sein, horizontal durch einen Bereich zu scrollen. Fr\u00fcher hat\n man daf\u00fcr auf Javascript-Slider setzen m\u00fcssen, doch mittlerweile l\u00e4sst \nsich dieser Effekt allein mit CSS umsetzen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Diesen Effekt w\u00fcrde man auch mit einem einfachen <code>overflow-x: scroll;<\/code> hinbekommen. Der Vorteil von Scroll-Snap gegen\u00fcber <code>overflow-x: scroll;<\/code>\n ist \u2013 und daher kommt auch der Name \u2013 dass die Elemente auf der B\u00fchne \n\u201eeinschnappen\u201c. D.h. du scrollst das Element bis zu einem bestimmten \nPunkt und beim Loslassen wird es vom Browser selbstst\u00e4ndig auf der B\u00fchne\n positioniert.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Das HTML-Grundger\u00fcst f\u00fcr Scroll-Snap<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr unser <a href=\"https:\/\/erdmann-freunde.de\/produkte\/contao-themes\/sirius\/\">Contao Onepager Theme SIRIUS<\/a>\n haben wir einen Bereich mit 4 Leistungen angelegt. Jede Karte zeigt \neine Leistung und man sieht in der Desktop-Ansicht sehr gut, dass diese 4\n Karten, w\u00fcrden wir sie auf dem Smartphone einfach untereinander \ndarstellen, sehr viel Platz einnehmen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das HTML-Grundger\u00fcst basiert auf einem Reihe Start- und End-Element inkl. Bildern in Contao und sieht wie folgt aus:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"row ce_rowStart\">\n  &lt;div class=\"ce_image block\">\n    &lt;figure class=\"image_container float_above\">\n\t&lt;img src=\"files\/demo\/service-1.jpg\" width=\"481\" height=\"846\" alt=\"\" itemprop=\"image\">\n    &lt;\/figure>\n  &lt;\/div>\n  &lt;div class=\"ce_image block\">\n    &lt;figure class=\"image_container float_above\">\n\t&lt;img src=\"files\/demo\/service-2.jpg\" width=\"481\" height=\"846\" alt=\"\" itemprop=\"image\">\n    &lt;\/figure>\n  &lt;\/div>\n  &lt;div class=\"ce_image block\">\n    &lt;figure class=\"image_container float_above\">\n\t&lt;img src=\"files\/demo\/service-3.jpg\" width=\"481\" height=\"846\" alt=\"\" itemprop=\"image\">\n    &lt;\/figure>\n  &lt;\/div>\n  &lt;div class=\"ce_image block\">\n    &lt;figure class=\"image_container float_above\">\n\t&lt;img src=\"files\/demo\/service-4.jpg\" width=\"481\" height=\"846\" alt=\"\" itemprop=\"image\">\n    &lt;\/figure>\n  &lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Wichtig ist, dass die Karten alle innerhalb des gleichen \u00fcbergeordneten Containers stehen, im Beispiel <code>&lt;div class=\"row ce_rowStart\"&gt;<\/code>.\n Also selbst wenn ich 8 Elemente habe und diese auf dem Desktop aus 2 x 4\n Karten bestehen, sollten diese innerhalb der gleichen Reihe stehen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Das (S)CSS-Grundger\u00fcst f\u00fcr Scroll-Snap<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Um die Karten in der Desktop Ansicht darzustellen, kann ich \ndiese per Flexbox anordnen. Das hat einerseits den Vorteil, dass alle \nElemente die gleiche H\u00f6he bekommen, andererseits kann ich mit einer \nZeile sagen, dass die Elemente automatisch in eine neue Zeile umbrechen \nsollen \u2013 bzw. eben gerade nicht, wie f\u00fcr unsere Smartphone-Ansicht \nnotwendig.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.row {\n  display: flex;\n\n  @media screen and (min-width: 768px) {\n    flex-wrap: wrap;\n  }\n}\n\n.card {\n  @media screen and (min-width: 550px) {\n    width: 50%;\n  }\n  \n  @media screen and (min-width: 768px) {\n    width: 25%;\n  }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Wenn du noch nicht mit SCSS gearbeitet hast, dann schau dir doch mal unser E-Book <a href=\"https:\/\/erdmann-freunde.de\/ressourcen\/e-books\/crashkurs-sass\/\">Crashkurs Sass<\/a> an.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Scroll-Snap im Einsatz<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Nun m\u00f6chte ich diese Darstellung f\u00fcr kleinere Bildschirme \nmithilfe von Scroll-Snap optimieren. Daf\u00fcr gebe ich dem \u00fcbergeordneten \nContainer die Scroll-Snap-Eigenschaft. Au\u00dferdem wird ein <code>overflow: scroll<\/code> f\u00fcr die entsprechende Richtung ben\u00f6tigt:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.row {\n  display: flex;\n\n  scroll-snap-type: x mandatory; \/\/ x = horizontal, y = vertical\n  overflow-x: scroll; \/\/ needed for scroll-snap behaviour, fallback if scroll-snap is not supported\n  -webkit-overflow-scrolling: touch; \/\/ needed for iOS\n\t\n  @media screen and (min-width: 768px) {\n    flex-wrap: wrap;\n  }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Das <code>x<\/code> gibt dabei an, dass die Scrollrichtung horizontal sein soll und das <code>mandatory<\/code>, dass sich an die Snap-Points gehalten werden soll.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nun sorge ich daf\u00fcr, dass meine Elemente nicht 100% Breite haben, \nsondern nur so breit sind, dass sich das n\u00e4chste Element im Anschnitt \nbefindet. 100% Breite ginge auch, aber durch das n\u00e4chste Element im \nAnschnitt mache ich dem Nutzer eher deutlich, dass sich da rechts vom \nersten Element noch weitere Elemente befinden k\u00f6nnten:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.card {\n  width: 80%; \/\/ decrease element width\n  flex-shrink: 0; \/\/ make sure elements does not get smaller than 80% screen-width\n  scroll-snap-align: center;\n  overflow: visible; \/\/ needed for Contao, as most Elements use the \"block\" class with overflow: hidden;\n  \n  @media screen and (min-width: 550px) {\n    width: 50%;\n  }\n  \n  @media screen and (min-width: 768px) {\n    width: 25%;\n  }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Diese Zeilen reichen bereits aus, damit sich die Elemente \nscrollen lassen und selbstst\u00e4ndig auf der B\u00fchne \u201eeinschnappen\u201c.Eine \n\u00dcbersicht \u00fcber weitere CSS-Eigenschaften von Scroll-Snap findest du u.a.\n in den <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/scroll-snap-type\">MDN Web Docs<\/a> oder bei <a href=\"https:\/\/css-tricks.com\/practical-css-scroll-snapping\/\">CSS-Tricks<\/a>. Hier probierst du am besten selbst einmal aus, was alles m\u00f6glich ist, zum Beispiel mithilfe dieser kleinen Demo, die ich bei <a href=\"https:\/\/codepen.io\/erdmannfreunde\/pen\/PvgRgq\">Codepen<\/a> angelegt habe.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Noch ein paar Worte zur Browser-Unterst\u00fctzung:<\/strong> Laut <a href=\"https:\/\/caniuse.com\">Can I use<\/a>\n liegt aktuell die Browser-Unterst\u00fctzung zwischen 82% und knapp 85%, je \nnachdem ob man die Desktop-Browser mit einrechnet oder nicht.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr Browser die Scroll-Snap noch nicht unterst\u00fctzen, haben wir immerhin ein Fallback mit dem oben erw\u00e4hnten <code>overflow-x: scroll;<\/code>. Dadurch gehen dem Nutzer keine wesentlichen Informationen auf der Seite verloren.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein Beispiel, wie wir Scroll-Snap umgesetzt haben, findest du in unserem <a href=\"https:\/\/sirius.erdmann-freunde.de\/\">SIRIUS-Theme<\/a>.\n Solltest du Fragen zur Umsetzung haben, Anmerkungen oder Feedback zum \nBrowsersupport, dann schreib sie gerne in die Kommentare.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS Scroll Snap: Neue L\u00f6sungen f\u00fcr Smartphones und Tablets 11. Juni 2019 09:02 von Dennis In diesem Artikel zeige ich dir, wie du die relativ neue CSS-Eigenschaft Scroll Snap dazu verwendest, um Inhalte horizontal oder vertikal zu scrollen, Elemente einzurasten und somit neue platzsparende L\u00f6sungen f\u00fcr Smartphones und Tablets entwickelst. Wenn du viel mit dem [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-461","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=\/wp\/v2\/pages\/461","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=461"}],"version-history":[{"count":0,"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=\/wp\/v2\/pages\/461\/revisions"}],"wp:attachment":[{"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=461"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}