{"id":14758,"date":"2019-01-30T14:30:20","date_gmt":"2019-01-30T13:30:20","guid":{"rendered":"https:\/\/www.inovex.de\/blog\/?p=14758"},"modified":"2024-05-29T07:12:19","modified_gmt":"2024-05-29T05:12:19","slug":"css-scroll-snap-state-of-the-web","status":"publish","type":"post","link":"https:\/\/www.inovex.de\/de\/blog\/css-scroll-snap-state-of-the-web\/","title":{"rendered":"CSS Scroll Snap [State of the Web]"},"content":{"rendered":"<p>In the past few years a recognizable trend of single page websites emerged (not to be confused with the term \u2018single page application\u2019). These sites consist of mainly one large page where the users\u2019 most important navigation tool is scrolling. Classic examples can be seen on <a href=\"https:\/\/www.apple.com\/mac\/\" target=\"_blank\" rel=\"noopener\">apple.com\/mac<\/a> and duracellenergybank.com. Similar to watching TV and zapping through the channels, single page websites are typically simply structured and intuitive to understand.<\/p>\n<p>In addition to such single paginated articles, image carousels represent a common UX pattern, where scrolling can be used to slide between the images.<\/p>\n<p><!--more--><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\"><\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-scroll-snap-state-of-the-web\/#Introduction\" >Introduction<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-scroll-snap-state-of-the-web\/#Usage\" >Usage<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-scroll-snap-state-of-the-web\/#When-to-use-it\" >When to use it?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-scroll-snap-state-of-the-web\/#What-are-the-Main-Use-Cases\" >What are the Main Use-Cases?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-scroll-snap-state-of-the-web\/#What-are-the-Usability-Advantages\" >What are the Usability Advantages?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-scroll-snap-state-of-the-web\/#Which-Flaws-Might-Come-up\" >Which Flaws Might Come up?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-scroll-snap-state-of-the-web\/#Summary\" >Summary<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-scroll-snap-state-of-the-web\/#Further-Ideas\" >Further Ideas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-scroll-snap-state-of-the-web\/#Resources-and-further-notes\" >Resources and further notes<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-scroll-snap-state-of-the-web\/#All-Articles-in-this-Series\" >All Articles in this Series<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Introduction\"><\/span>Introduction<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Scroll snapping is a method of defining snap points to tell the browser where it should stop scrolling. The process of snapping to the edge of an element (e.g. section, image, box, etc.) when coming close to it is used in order to achieve optimized scrolling positions by preventing unwanted elements from projecting into the current view, reducing the screen space by their cut-off contents. (There are some situations though for which the other elements&#8216; edges indicate what comes next. This can be seen later in this article.)<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-14778 size-medium\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/scroll-positions_a_b_wide-300x175.png\" alt=\"Difference with and without css scroll snap\" width=\"300\" height=\"175\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/scroll-positions_a_b_wide-300x175.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/scroll-positions_a_b_wide-1024x598.png 1024w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/scroll-positions_a_b_wide-768x449.png 768w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/scroll-positions_a_b_wide-400x234.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/scroll-positions_a_b_wide-360x210.png 360w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/scroll-positions_a_b_wide.png 1492w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>As the image above illustrates, scenario A shows a view where the user has scrolled over elements and stopped at a position where several content sections can be seen. This is the default browser behavior which can be found on almost all informative websites, such as blogs, e-shops, tools, etc.<\/p>\n<p>But when it comes to pages where single steps are presented to the user one at a time, especially with single page websites, it is good practice to let the browser snap to the edge of an element as the user scrolls.<\/p>\n<p>In scenario B, only one step is visible and no parts of adjacent sections can be seen. Check out this interactive demo: <\/p>\n<p>The new CSS Scroll Snap standard helps web frontend developers to create precisely controlled scroll experiences by defining the scroll snapping positions.<\/p>\n<p><b>Wait! Did I read that correctly? Changing the behavior of scrolling?!<\/b> ?<\/p>\n<p>Yes, that\u2019s right. The good news is that the new CSS Scroll Snap standard differs from other JS scrolling libraries in that it does not interfere with the scrolling operation directly, but only watches for defined snap points. This means the scrolling interface you build is going to feel just like the native interface on whatever platform it is viewed on.<\/p>\n<p>Scroll snapping happens <b>after<\/b> all other scroll operations, including those initiated by scripts.<\/p>\n<p>But: the use of this feature must be well thought-through, see the section \u2018When to use it\u2019 below.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Usage\"><\/span>Usage<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>You can find all relevant information about <em>how<\/em> to use scroll snapping on <a href=\"https:\/\/css-tricks.com\/practical-css-scroll-snapping\/\" target=\"_blank\" rel=\"noopener\">CSS-Tricks<\/a> and <a href=\"https:\/\/developers.google.com\/web\/updates\/2018\/07\/css-scroll-snap\" target=\"_blank\" rel=\"noopener\">Google Developers<\/a>. A more detailed documentation can be found on the <a href=\"https:\/\/www.w3.org\/TR\/css-scroll-snap-1\/\" target=\"_blank\" rel=\"noopener\">W3C Recommendation Draft<\/a>.<\/p>\n<p>On <a href=\"https:\/\/caniuse.com\/#search=scroll%20snap\" target=\"_blank\" rel=\"noopener\">caniuse<\/a> you can find information about browser-support and known issues. Additional, a polyfill can be found on <a href=\"https:\/\/www.npmjs.com\/package\/css-scroll-snap-polyfill\">npm<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"When-to-use-it\"><\/span>When to use it?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>This feature is definitely for specific use only! You should not define snapping points all over your layout and let the browser magically snap to all kinds of edges.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"What-are-the-Main-Use-Cases\"><\/span>What are the Main Use-Cases?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>As explained in the motivation section, the most common use cases are carousels and single page websites. Whenever it is important to focus on one thing at a time, scroll snapping might be a solution to improve the usability.<\/p>\n<p>Without scroll snapping, focusing on one part at a time can be achieved by having multiple views for each step. For example when the user needs to fill out a form which is divided into several parts, such as checkout procedures of online shops.<\/p>\n<p>It could also be more convenient to let posts of news and social media pages snap. In the following example you can see how this would look for Twitter.<\/p>\n<table>\n<tbody>\n<tr>\n<td>Normal Scrolling Behavior<\/td>\n<td>With Scroll Snapping for Posts<\/td>\n<\/tr>\n<tr>\n<td><img decoding=\"async\" src=\"https:\/\/media.giphy.com\/media\/1qi4feUUGTND5dB1zj\/giphy.gif\" alt=\"Twitter scrolling without scroll-snap\" \/><\/td>\n<td><img decoding=\"async\" src=\"https:\/\/media.giphy.com\/media\/YWaBmVgy4KZ7q1abxa\/giphy.gif\" alt=\"Twitter scrolling with scroll-snap\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p>I wrote this little Bookmarklet-Snippet for Twitter-Scroll-Snap:<\/p>\n<pre class=\"font:sourcecodepro font-size:11 lang:default decode:true\">javascript:window.setInterval(function(){document.querySelector('body').setAttribute('style', 'max-height: 100vh; overflow-y: scroll; scroll-snap-type: y proximity; scroll-padding-top: 46px;'); document.querySelectorAll('li.stream-item').forEach(function(x){x.setAttribute('style', 'scroll-snap-align: start')}) }, 2500);<\/pre>\n<p>You just need to create a new bookmark with this code as specification for the Link and click it (every time) after you load the twitter website ?<\/p>\n<h3><span class=\"ez-toc-section\" id=\"What-are-the-Usability-Advantages\"><\/span>What are the Usability Advantages?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>One advantage is that you can configure the snap points in many ways, generating an individual solution which is best for your website. Because the CSS Scroll Snap method does not directly hijack the scrolling behavior, it is a useful tool to enhance the user experience of your product\/site\/component.<\/p>\n<p>Whether on mobile or desktop, as the user scrolls through the gallery, the images always stop at a pleasant position.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-14829\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/alignments-201x300.png\" alt=\"\" width=\"201\" height=\"300\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/alignments-201x300.png 201w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/alignments-400x596.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/alignments-360x537.png 360w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/alignments.png 507w\" sizes=\"auto, (max-width: 201px) 100vw, 201px\" \/><\/p>\n<p>Speaking of mobile, scroll snapping is a long existing core feature of the smartphone or tablet homescreen, where you have multiple horizontally aligned views as shelf spaces for your apps. Also in macOS, switching between multiple desktops, previewing PDF-files and user onboardings are examples where a scroll snapping mechanism is used. So there are a lot of situations in which scroll snapping can be very useful.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/media.giphy.com\/media\/5nh7EQ9omP7y4zuHOL\/giphy.gif\" alt=\"iPad Onboarding Scroll Snap\" width=\"168px\" height=\"300px\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Which-Flaws-Might-Come-up\"><\/span>Which Flaws Might Come up?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>By changing such a fundamental user interaction as scrolling the user can easily be frightened away. The term \u2018scroll-jacking\u2019 is common in relation to a bad user experience. CSS Scroll Snap has to be used sparcely and carefully. In general, users don\u2019t like websites that are contrary to their expectations. Such an awkward feeling can be experienced on the presentation site for the new <a href=\"https:\/\/www.apple.com\/de\/ipad-pro\/\" target=\"_blank\" rel=\"noopener\">iPad Pro<\/a>, where Apple intended to be very creative and playful.<\/p>\n<ul>\n<li>In many situations using this feature can cause rather bad user experience. Even on single page websites, skimming becomes more tricky and cumbersome with scroll snapping activated.<\/li>\n<li>Developers must be conscious of the issue that some content may become unreachable due to varying-sized sections, explained <a href=\"https:\/\/css-tricks.com\/practical-css-scroll-snapping\/#article-header-id-4\" target=\"_blank\" rel=\"noopener\">here<\/a> on CSS-Tricks.<\/li>\n<li>Also oversized elements can produce unexpected behavior. For example, if some element has more height than the viewport of the device, it\u2019s hard to see the whole content of that elements\u2019 sections, because the snapping interferes as soon as an edge comes close.<\/li>\n<li>Keep in mind, that not all visitors use devices that allow smooth scrolling (e.g. Magic Trackpad, Touch-Devices). Regular computer mice work with detents. Users with those devices go through a completely different experience as the scroll goes in discrete steps, resulting in a more wobbly UX.<\/li>\n<\/ul>\n<p>To see some of the flaws and pitfalls in action, check out this little demo: <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The CSS Scroll Snap feature looks like a promising method for improving the user experience on your website when used wisely. By allowing the browser to hook into the native scrolling interaction with CSS snap points, there are many scenarios where the user&#8217;s focus can be controlled more easily.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Further-Ideas\"><\/span>Further Ideas<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The configuration possibilities for this feature currently represent the basic needs only. There could be more helpful settings for creating perfectly fitting solutions. Here are some ideas:<\/p>\n<ul>\n<li>The time of the snapping process<\/li>\n<li>What about the timing functions (easing)<\/li>\n<li>Extending the feature by using JavaScript? Will there be some kind of snap-event to interact with? (e.g. shake the view after snapping)<\/li>\n<\/ul>\n<p>Given these suggestions, I hope you&#8217;ll have fun playing around with the CSS Scroll Snap Feature.<\/p>\n<p>Also check out the compatibility in different browsers:<br \/>\n<a href=\"https:\/\/caniuse.com\/css-snappoints\">https:\/\/caniuse.com\/css-snappoints<\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Resources-and-further-notes\"><\/span>Resources and further notes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/practical-css-scroll-snapping\/\">CSS Tricks<\/a><\/li>\n<li><a href=\"https:\/\/developers.google.com\/web\/updates\/2018\/07\/css-scroll-snap\">Google Developers<\/a><\/li>\n<li><a href=\"https:\/\/caniuse.com\/#search=scroll%20snap\">Can I Use<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/css-scroll-snap-1\/\">W3C Definition &#8211; Candidate Recommendation<\/a><\/li>\n<li><a href=\"https:\/\/drafts.csswg.org\/css-scroll-snap\/\">W3C Definition &#8211; Working Draft<\/a><\/li>\n<li><a href=\"https:\/\/www.awwwards.com\/websites\/single-page\/\">awwwards &#8211; Single Page Websites<\/a><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"All-Articles-in-this-Series\"><\/span>All Articles in this Series<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><a href=\"https:\/\/www.inovex.de\/blog\/screenshot-testing-mit-backstopjs-sotw\/\">Screenshot Testing mit BackstopJS<\/a><\/li>\n<li><a href=\"https:\/\/www.inovex.de\/blog\/webauthn-authentication\/\">WebAuthn<\/a><\/li>\n<li><a href=\"https:\/\/www.inovex.de\/blog\/native-browser-dialogs-libraries\/\">Native Browser Dialogs<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In the past few years a recognizable trend of single page websites emerged (not to be confused with the term \u2018single page application\u2019). These sites consist of mainly one large page where the users\u2019 most important navigation tool is scrolling. Classic examples can be seen on apple.com\/mac and duracellenergybank.com. Similar to watching TV and zapping [&hellip;]<\/p>\n","protected":false},"author":29,"featured_media":15306,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"ep_exclude_from_search":false,"footnotes":""},"tags":[70],"service":[444],"coauthors":[{"id":29,"display_name":"Daniel Eckelt","user_nicename":"deckelt"}],"class_list":["post-14758","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-web","service-frontend"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Scroll Snap [State of the Web] - inovex GmbH<\/title>\n<meta name=\"description\" content=\"CSS Scroll snapping is a method of defining snap points to tell the browser where it should stop scrolling. The process of snapping to the edge of an element (e.g. section, image, box, etc.) when coming close to it is used in order to achieve optimized scrolling positions and emphasise certain content.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-scroll-snap-state-of-the-web\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Scroll Snap [State of the Web] - inovex GmbH\" \/>\n<meta property=\"og:description\" content=\"CSS Scroll snapping is a method of defining snap points to tell the browser where it should stop scrolling. The process of snapping to the edge of an element (e.g. section, image, box, etc.) when coming close to it is used in order to achieve optimized scrolling positions and emphasise certain content.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inovex.de\/de\/blog\/css-scroll-snap-state-of-the-web\/\" \/>\n<meta property=\"og:site_name\" content=\"inovex GmbH\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inovexde\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-30T13:30:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-29T05:12:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/css-scroll-snap@0.75x.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1440\" \/>\n\t<meta property=\"og:image:height\" content=\"810\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Daniel Eckelt\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/css-scroll-snap@0.75x-1024x576.png\" \/>\n<meta name=\"twitter:creator\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:site\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Daniel Eckelt\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"6\u00a0Minuten\" \/>\n\t<meta name=\"twitter:label3\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data3\" content=\"Daniel Eckelt\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-scroll-snap-state-of-the-web\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-scroll-snap-state-of-the-web\\\/\"},\"author\":{\"name\":\"Daniel Eckelt\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/person\\\/91fffe365c2311c98b1818e45b989db5\"},\"headline\":\"CSS Scroll Snap [State of the Web]\",\"datePublished\":\"2019-01-30T13:30:20+00:00\",\"dateModified\":\"2024-05-29T05:12:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-scroll-snap-state-of-the-web\\\/\"},\"wordCount\":1238,\"commentCount\":11,\"publisher\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-scroll-snap-state-of-the-web\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/css-scroll-snap@0.75x.png\",\"keywords\":[\"Web\"],\"articleSection\":[\"Applications\",\"English Content\",\"General\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-scroll-snap-state-of-the-web\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-scroll-snap-state-of-the-web\\\/\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-scroll-snap-state-of-the-web\\\/\",\"name\":\"CSS Scroll Snap [State of the Web] - inovex GmbH\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-scroll-snap-state-of-the-web\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-scroll-snap-state-of-the-web\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/css-scroll-snap@0.75x.png\",\"datePublished\":\"2019-01-30T13:30:20+00:00\",\"dateModified\":\"2024-05-29T05:12:19+00:00\",\"description\":\"CSS Scroll snapping is a method of defining snap points to tell the browser where it should stop scrolling. The process of snapping to the edge of an element (e.g. section, image, box, etc.) when coming close to it is used in order to achieve optimized scrolling positions and emphasise certain content.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-scroll-snap-state-of-the-web\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-scroll-snap-state-of-the-web\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-scroll-snap-state-of-the-web\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/css-scroll-snap@0.75x.png\",\"contentUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/css-scroll-snap@0.75x.png\",\"width\":1440,\"height\":810,\"caption\":\"A stylized globe with the title of this article on a rose ribbon\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-scroll-snap-state-of-the-web\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Scroll Snap [State of the Web]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\",\"name\":\"inovex GmbH\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\",\"name\":\"inovex GmbH\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/inovex-logo-16-9-1.png\",\"contentUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/inovex-logo-16-9-1.png\",\"width\":1921,\"height\":1081,\"caption\":\"inovex GmbH\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/inovexde\",\"https:\\\/\\\/x.com\\\/inovexgmbh\",\"https:\\\/\\\/www.instagram.com\\\/inovexlife\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/inovex\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UC7r66GT14hROB_RQsQBAQUQ\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/person\\\/91fffe365c2311c98b1818e45b989db5\",\"name\":\"Daniel Eckelt\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/daniel-eckelt_9166-mittel-96x96.jpg3b89ef212a06b595edab827642fa13e4\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/daniel-eckelt_9166-mittel-96x96.jpg\",\"contentUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/daniel-eckelt_9166-mittel-96x96.jpg\",\"caption\":\"Daniel Eckelt\"},\"description\":\"Daniel arbeitet leidenschaftlich gerne im Frontend und sieht den Endnutzer stets im Zentrum seiner Arbeit. Dabei verfolgt er das Ziel, Produkte zu schaffen, die nicht nur funktional sind, sondern auch eine positive Erfahrung f\u00fcr den Benutzer bieten. Um diesem Anspruch gerecht zu werden, besch\u00e4ftigt er sich intensiv mit den neuesten Trends und Technologien im Bereich der Webentwicklung. Au\u00dferdem betreut er verschiedene Abschlussarbeiten im Bereich Web.\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/author\\\/deckelt\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Scroll Snap [State of the Web] - inovex GmbH","description":"CSS Scroll snapping is a method of defining snap points to tell the browser where it should stop scrolling. The process of snapping to the edge of an element (e.g. section, image, box, etc.) when coming close to it is used in order to achieve optimized scrolling positions and emphasise certain content.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inovex.de\/de\/blog\/css-scroll-snap-state-of-the-web\/","og_locale":"de_DE","og_type":"article","og_title":"CSS Scroll Snap [State of the Web] - inovex GmbH","og_description":"CSS Scroll snapping is a method of defining snap points to tell the browser where it should stop scrolling. The process of snapping to the edge of an element (e.g. section, image, box, etc.) when coming close to it is used in order to achieve optimized scrolling positions and emphasise certain content.","og_url":"https:\/\/www.inovex.de\/de\/blog\/css-scroll-snap-state-of-the-web\/","og_site_name":"inovex GmbH","article_publisher":"https:\/\/www.facebook.com\/inovexde","article_published_time":"2019-01-30T13:30:20+00:00","article_modified_time":"2024-05-29T05:12:19+00:00","og_image":[{"width":1440,"height":810,"url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/css-scroll-snap@0.75x.png","type":"image\/png"}],"author":"Daniel Eckelt","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/css-scroll-snap@0.75x-1024x576.png","twitter_creator":"@inovexgmbh","twitter_site":"@inovexgmbh","twitter_misc":{"Verfasst von":"Daniel Eckelt","Gesch\u00e4tzte Lesezeit":"6\u00a0Minuten","Written by":"Daniel Eckelt"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inovex.de\/de\/blog\/css-scroll-snap-state-of-the-web\/#article","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/blog\/css-scroll-snap-state-of-the-web\/"},"author":{"name":"Daniel Eckelt","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/91fffe365c2311c98b1818e45b989db5"},"headline":"CSS Scroll Snap [State of the Web]","datePublished":"2019-01-30T13:30:20+00:00","dateModified":"2024-05-29T05:12:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/css-scroll-snap-state-of-the-web\/"},"wordCount":1238,"commentCount":11,"publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/css-scroll-snap-state-of-the-web\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/css-scroll-snap@0.75x.png","keywords":["Web"],"articleSection":["Applications","English Content","General"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inovex.de\/de\/blog\/css-scroll-snap-state-of-the-web\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inovex.de\/de\/blog\/css-scroll-snap-state-of-the-web\/","url":"https:\/\/www.inovex.de\/de\/blog\/css-scroll-snap-state-of-the-web\/","name":"CSS Scroll Snap [State of the Web] - inovex GmbH","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/css-scroll-snap-state-of-the-web\/#primaryimage"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/css-scroll-snap-state-of-the-web\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/css-scroll-snap@0.75x.png","datePublished":"2019-01-30T13:30:20+00:00","dateModified":"2024-05-29T05:12:19+00:00","description":"CSS Scroll snapping is a method of defining snap points to tell the browser where it should stop scrolling. The process of snapping to the edge of an element (e.g. section, image, box, etc.) when coming close to it is used in order to achieve optimized scrolling positions and emphasise certain content.","breadcrumb":{"@id":"https:\/\/www.inovex.de\/de\/blog\/css-scroll-snap-state-of-the-web\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inovex.de\/de\/blog\/css-scroll-snap-state-of-the-web\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/blog\/css-scroll-snap-state-of-the-web\/#primaryimage","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/css-scroll-snap@0.75x.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/css-scroll-snap@0.75x.png","width":1440,"height":810,"caption":"A stylized globe with the title of this article on a rose ribbon"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inovex.de\/de\/blog\/css-scroll-snap-state-of-the-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inovex.de\/de\/"},{"@type":"ListItem","position":2,"name":"CSS Scroll Snap [State of the Web]"}]},{"@type":"WebSite","@id":"https:\/\/www.inovex.de\/de\/#website","url":"https:\/\/www.inovex.de\/de\/","name":"inovex GmbH","description":"","publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inovex.de\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.inovex.de\/de\/#organization","name":"inovex GmbH","url":"https:\/\/www.inovex.de\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","width":1921,"height":1081,"caption":"inovex GmbH"},"image":{"@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inovexde","https:\/\/x.com\/inovexgmbh","https:\/\/www.instagram.com\/inovexlife\/","https:\/\/www.linkedin.com\/company\/inovex","https:\/\/www.youtube.com\/channel\/UC7r66GT14hROB_RQsQBAQUQ"]},{"@type":"Person","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/91fffe365c2311c98b1818e45b989db5","name":"Daniel Eckelt","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/wp-content\/uploads\/daniel-eckelt_9166-mittel-96x96.jpg3b89ef212a06b595edab827642fa13e4","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/daniel-eckelt_9166-mittel-96x96.jpg","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/daniel-eckelt_9166-mittel-96x96.jpg","caption":"Daniel Eckelt"},"description":"Daniel arbeitet leidenschaftlich gerne im Frontend und sieht den Endnutzer stets im Zentrum seiner Arbeit. Dabei verfolgt er das Ziel, Produkte zu schaffen, die nicht nur funktional sind, sondern auch eine positive Erfahrung f\u00fcr den Benutzer bieten. Um diesem Anspruch gerecht zu werden, besch\u00e4ftigt er sich intensiv mit den neuesten Trends und Technologien im Bereich der Webentwicklung. Au\u00dferdem betreut er verschiedene Abschlussarbeiten im Bereich Web.","url":"https:\/\/www.inovex.de\/de\/blog\/author\/deckelt\/"}]}},"_links":{"self":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/14758","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/comments?post=14758"}],"version-history":[{"count":7,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/14758\/revisions"}],"predecessor-version":[{"id":54060,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/14758\/revisions\/54060"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media\/15306"}],"wp:attachment":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media?parent=14758"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/tags?post=14758"},{"taxonomy":"service","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/service?post=14758"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/coauthors?post=14758"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}