{"id":451,"date":"2024-07-31T10:00:40","date_gmt":"2024-07-31T10:00:40","guid":{"rendered":"http:\/\/www.diveintoaccessibility.com\/?p=451"},"modified":"2024-10-14T16:42:41","modified_gmt":"2024-10-14T16:42:41","slug":"snappy-scroll-with-css-scroll-snap","status":"publish","type":"post","link":"http:\/\/www.diveintoaccessibility.com\/index.php\/2024\/07\/31\/snappy-scroll-with-css-scroll-snap\/","title":{"rendered":"Snappy Scroll with CSS Scroll Snap"},"content":{"rendered":"<p><strong>CSS Scroll Snap<\/strong> was introduced to allow you to define snap points for scrollable elements. It ensures that the scrolling lands precisely at the desired points. <\/p>\n<p>This new CSS feature is especially useful for creating carousels, slideshows, or any layout where you want to control the user\u2019s scrolling experience. Let\u2019s see how it works.<\/p>\n<h4>New Properties<\/h4>\n<p>The <strong>CSS Scroll Snap<\/strong> module introduces two main new properties to give us more control of the scrolling behavior:<\/p>\n<ul>\n<li><code>scroll-snap-type<\/code>: This property is applied to the container element to define the snapping behavior. It can be set to <code>x<\/code>, <code>y<\/code>, or <code>both<\/code> to specify the axis of snapping. It also takes a second argument which can be set to <code>mandatory<\/code> or <code>proximity<\/code>. The <code>mandatory<\/code> value forces the scroll to snap to the nearest snap point, while <code>proximity<\/code> allows the scroll to stop at any point within the snap area.<\/li>\n<li><code>scroll-snap-align<\/code>: This property is applied to the scrollable elements within the container to define the snap points. It can be set to <code>start<\/code>, <code>center<\/code>, or <code>end<\/code> to specify where the element should snap to the container. It can also be set to <code>none<\/code> to disable snapping for a specific element.<\/li>\n<\/ul>\n<h4>Creating Carousel<\/h4>\n<p>First, let\u2019s say we want to create a horizontal carousel of images. We want each image to slide and immediately snap into place as we scroll it. First, we place the HTML, as follows:<\/p>\n<pre class=\"html\">\r\n&lt;div class=\"carousel\"&gt;\r\n    &lt;div class=\"slide\"&gt;\r\n        &lt;img src=\"\/image-1.jpg\" width=\"600\" height=\"400\" \/&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"slide\"&gt;\r\n        &lt;img src=\"\/image-2.jpg\" width=\"600\" height=\"400\" \/&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"slide\"&gt;\r\n        &lt;img src=\"\/image-3.jpg\" width=\"600\" height=\"400\" \/&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"slide\"&gt;\r\n        &lt;img src=\"\/image-4.jpg\" width=\"600\" height=\"400\" \/&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>As well as the styles.<\/p>\n<pre class=\"css\">\r\n.carousel {\r\n    display: flex;\r\n    overflow-x: scroll;\r\n    scroll-snap-type: x mandatory;\r\n}\r\n\r\n.image {\r\n    flex: 0 0 100%;\r\n    scroll-snap-align: center;\r\n    \r\n    \/* Stylistic elements *\/\r\n    width: 100%;\r\n    height: 100vh;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 2rem;\r\n    background-color: #dddddd;\r\n}\r\n<\/pre>\n<p>In this example, we set the <code>scroll-snap-type<\/code> property to <code>x mandatory<\/code> on the <code>.carousel<\/code> container, indicating that the scroll snapping should happen horizontally and be mandatory. We also set the <code>scroll-snap-align<\/code> property to <code>center<\/code> on the <code>.image<\/code> elements, meaning each image will snap to the center of the container as you scroll.<\/p>\n<p class=\"codepen\" data-height=\"450\" data-default-tab=\"result\" data-slug-hash=\"NWZdvOr\" data-pen-title=\"Scroll Snap\" data-user=\"hkdc\" style=\"height: 450px;align-items: center;justify-content: center;border: 2px solid;margin: 1em 0;padding: 1em\"><span>See the Pen <a href=\"https:\/\/codepen.io\/hkdc\/pen\/NWZdvOr\" rel=\"nofollow\">Scroll Snap<\/a> by HONGKIAT (<a href=\"https:\/\/codepen.io\/hkdc\" rel=\"nofollow\">@hkdc<\/a>)on <a href=\"https:\/\/codepen.io\" rel=\"nofollow\">CodePen<\/a>.<\/span><\/p>\n<p>To make it scroll vertically, we can simply set the <code>scroll-snap-type<\/code> value to <code>y<\/code>, and change the direction of our Flex layout so each element would stack vertically.<\/p>\n<pre class=\"css\">\r\n.carousel {\r\n    display: flex;\r\n    flex-direction: column;\r\n    overflow-y: scroll;\r\n    height: 100vh;\r\n    scroll-snap-type: y mandatory;\r\n}\r\n\r\n\/* ...Remaining code... *\/\r\n<\/pre>\n<p>Now, let\u2019s scroll vertically.<\/p>\n<p class=\"codepen\" data-height=\"600\" data-default-tab=\"result\" data-slug-hash=\"poXRWaK\" data-pen-title=\"Scroll Snap (Vertical)\" data-user=\"hkdc\" style=\"height: 600px;align-items: center;justify-content: center;border: 2px solid;margin: 1em 0;padding: 1em\"><span>See the Pen <a href=\"https:\/\/codepen.io\/hkdc\/pen\/poXRWaK\" rel=\"nofollow\">Scroll Snap (Vertical)<\/a> by HONGKIAT (<a href=\"https:\/\/codepen.io\/hkdc\" rel=\"nofollow\">@hkdc<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"nofollow\">CodePen<\/a>.<\/span><\/p>\n<h4>Browser Support<\/h4>\n<div class=\"su-table su-table-alternate\">\n<table>\n<thead>\n<tr>\n<th>Browser<\/th>\n<th>Desktop Version<\/th>\n<th>Mobile Version<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Google Chrome<\/td>\n<td>69 and later<\/td>\n<td>127 and later<\/td>\n<\/tr>\n<tr>\n<td>Mozilla Firefox<\/td>\n<td>68 and later<\/td>\n<td>68 and later<\/td>\n<\/tr>\n<tr>\n<td>Safari<\/td>\n<td>11 and later<\/td>\n<td>11 and later<\/td>\n<\/tr>\n<tr>\n<td>Microsoft Edge<\/td>\n<td>79 and later<\/td>\n<td>79 and later<\/td>\n<\/tr>\n<tr>\n<td>Opera<\/td>\n<td>64 and later<\/td>\n<td>80 and later<\/td>\n<\/tr>\n<tr>\n<td>Internet Explorer<\/td>\n<td>Not supported<\/td>\n<td>Not supported<\/td>\n<\/tr>\n<tr>\n<td>Samsung Internet<\/td>\n<td>N\/A<\/td>\n<td>10.1 and later<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h4>Wrapping up<\/h4>\n<p>CSS Scroll Snap is a powerful tool for creating smooth and controlled scrolling experiences. Whether you\u2019re building a carousel, a slideshow, or any scrollable layout, you can now create the perfect scrolling effect without any JavaScript added.<\/p>\n<p>In this article, we\u2019ve only touched the very basic implementations. There are a lot more creative ways we can leverage <strong>CSS Scroll Snap<\/strong>. Here are some of them for your inspiration.<\/p>\n<h5>CSS-only Carousel<\/h5>\n<p>Our carousel created in this article is pretty basic. The following demo shows how you can add controls like buttons and pagination into the carousel, all without any JavaScript involved.<\/p>\n<p class=\"codepen\" data-height=\"600\" data-default-tab=\"result\" data-slug-hash=\"WNbQByE\" data-pen-title=\"A CSS-only Carousel Slider\" data-user=\"Schepp\" style=\"height: 600px;align-items: center;justify-content: center;border: 2px solid;margin: 1em 0;padding: 1em\"><span>See the Pen <a href=\"https:\/\/codepen.io\/Schepp\/pen\/WNbQByE\" rel=\"nofollow\">A CSS-only Carousel Slider<\/a> by Christian Schaefer (<a href=\"https:\/\/codepen.io\/Schepp\" rel=\"nofollow\">@Schepp<\/a>)on <a href=\"https:\/\/codepen.io\" rel=\"nofollow\">CodePen<\/a>.<\/span><\/p>\n<h5>Animated Verbs<\/h5>\n<p>Similar to what we created here, but with more vibrant colors, added with animated text.<\/p>\n<p class=\"codepen\" data-height=\"600\" data-default-tab=\"result\" data-slug-hash=\"MWgbqON\" data-pen-title=\"Animated Verbs\" data-user=\"hexagoncircle\" style=\"height: 600px;align-items: center;justify-content: center;border: 2px solid;margin: 1em 0;padding: 1em\"><span>See the Pen <a href=\"https:\/\/codepen.io\/hexagoncircle\/pen\/MWgbqON\" rel=\"nofollow\">Animated Verbs<\/a> by Ryan Mulligan (<a href=\"https:\/\/codepen.io\/hexagoncircle\" rel=\"nofollow\">@hexagoncircle<\/a>)on <a href=\"https:\/\/codepen.io\" rel=\"nofollow\">CodePen<\/a>.<\/span><\/p>\n<h5>Digital Walls<\/h5>\n<p>Creative use of grid layouts combined with CSS Scroll Snap on each column.<\/p>\n<p class=\"codepen\" data-height=\"600\" data-default-tab=\"result\" data-slug-hash=\"gOmMgpx\" data-pen-title=\"Modern Blog Layout with CSS Grid\" data-user=\"TurkAysenur\" style=\"height: 600px;align-items: center;justify-content: center;border: 2px solid;margin: 1em 0;padding: 1em\"> <span>See the Pen <a href=\"https:\/\/codepen.io\/TurkAysenur\/pen\/gOmMgpx\" rel=\"nofollow\"> Modern Blog Layout with CSS Grid<\/a> by Aysenur Turk (<a href=\"https:\/\/codepen.io\/TurkAysenur\" rel=\"nofollow\">@TurkAysenur<\/a>)<br \/>\n  on <a href=\"https:\/\/codepen.io\" rel=\"nofollow\">CodePen<\/a>.<\/span> <\/p>\n<\/p>\n<p>The post <a href=\"https:\/\/www.hongkiat.com\/blog\/css-scroll-snap\/\">Snappy Scroll with CSS Scroll Snap<\/a> appeared first on <a href=\"https:\/\/www.hongkiat.com\/blog\">Hongkiat<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS Scroll Snap was introduced to allow you to define snap points for scrollable elements. It ensures that the scrolling lands precisely at the desired [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[12],"tags":[],"_links":{"self":[{"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/posts\/451"}],"collection":[{"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/comments?post=451"}],"version-history":[{"count":1,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/posts\/451\/revisions"}],"predecessor-version":[{"id":452,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/posts\/451\/revisions\/452"}],"wp:attachment":[{"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/media?parent=451"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/categories?post=451"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/tags?post=451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}