{"id":328,"date":"2024-07-31T10:00:40","date_gmt":"2024-07-31T10:00:40","guid":{"rendered":"https:\/\/kerrprogroup.com\/?p=328"},"modified":"2025-03-19T12:18:34","modified_gmt":"2025-03-19T12:18:34","slug":"snappy-scroll-with-css-scroll-snap","status":"publish","type":"post","link":"https:\/\/kerrprogroup.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<div class=\"carousel\">\r\n    <div class=\"slide\">\r\n        <img decoding=\"async\" loading=\"lazy\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"600\" height=\"400\" class=\"lazyload\" data-src=\"\/image-1.jpg\">\r\n    <\/div>\r\n    <div class=\"slide\">\r\n        <img decoding=\"async\" loading=\"lazy\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"600\" height=\"400\" class=\"lazyload\" data-src=\"\/image-2.jpg\">\r\n    <\/div>\r\n    <div class=\"slide\">\r\n        <img decoding=\"async\" loading=\"lazy\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"600\" height=\"400\" class=\"lazyload\" data-src=\"\/image-3.jpg\">\r\n    <\/div>\r\n    <div class=\"slide\">\r\n        <img decoding=\"async\" loading=\"lazy\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"600\" height=\"400\" class=\"lazyload\" data-src=\"\/image-4.jpg\">\r\n    <\/div>\r\n<\/div>\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 points. 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. New Properties The CSS Scroll Snap module introduces two main new properties to give us more&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[],"_links":{"self":[{"href":"https:\/\/kerrprogroup.com\/index.php\/wp-json\/wp\/v2\/posts\/328"}],"collection":[{"href":"https:\/\/kerrprogroup.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kerrprogroup.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kerrprogroup.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kerrprogroup.com\/index.php\/wp-json\/wp\/v2\/comments?post=328"}],"version-history":[{"count":1,"href":"https:\/\/kerrprogroup.com\/index.php\/wp-json\/wp\/v2\/posts\/328\/revisions"}],"predecessor-version":[{"id":329,"href":"https:\/\/kerrprogroup.com\/index.php\/wp-json\/wp\/v2\/posts\/328\/revisions\/329"}],"wp:attachment":[{"href":"https:\/\/kerrprogroup.com\/index.php\/wp-json\/wp\/v2\/media?parent=328"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kerrprogroup.com\/index.php\/wp-json\/wp\/v2\/categories?post=328"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kerrprogroup.com\/index.php\/wp-json\/wp\/v2\/tags?post=328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}