{"id":404,"date":"2015-07-14T10:57:03","date_gmt":"2015-07-14T10:57:03","guid":{"rendered":"http:\/\/aurelio.audero.it\/blog\/?p=404"},"modified":"2016-06-05T03:19:48","modified_gmt":"2016-06-05T03:19:48","slug":"trick-of-the-day-css-scroll-snap-points","status":"publish","type":"post","link":"https:\/\/www.audero.it\/blog\/2015\/07\/14\/trick-of-the-day-css-scroll-snap-points\/","title":{"rendered":"Trick of the day: CSS Scroll Snap Points"},"content":{"rendered":"

When you create a gallery, you usually want to implement a feature where every time the user clicks (or press the ENTER<\/kbd> key) on an arrow, you move straight to the next (or previous) image. This effect can also be used to create a website that has several sections, each of which takes the full window’s height, where at each scroll you move the user to a new section. To achieve this goal, developers have always used JavaScript but the W3C has proposed a new standard called CSS Scroll Snap Points<\/a>.
\n<\/p>\n

\"CSS<\/p>\n

The CSS Scroll Snap Points specification describes features to control panning and scrolling behavior with “snap points”. It allows a developer to avoid the use of JavaScript, to have a native and smooth experience, and to have a lighter website. To implement an horizontal gallery that employs this feature, you can write your HTML as normal. For example, you might have:<\/p>\n

\r\n<div class="gallery">\r\n   <img src="image.jpg" alt="" \/>\r\n   <img src="image.jpg" alt="" \/>\r\n   <img src="image.jpg" alt="" \/>\r\n   <img src="image.jpg" alt="" \/>\r\n<\/div>\r\n<\/pre>\n
And this would be the CSS code:<\/p>\n
\r\n.gallery\r\n{\r\n   overflow-x: auto;\r\n   overflow-y: hidden;\r\n   white-space: nowrap;\r\n   scroll-snap-type: mandatory;\r\n   scroll-behavior: smooth;\r\n   scroll-snap-points-x: repeat(100%);\r\n}\r\n<\/pre>\n
There are other properties described by the standard and other widgets that you can create with it, so I’ll let you read this article that also includes a few demos:<\/p>\n
http:\/\/blog.gospodarets.com\/css-scroll-snap\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
When you create a gallery, you usually want to implement a feature where every time the user clicks (or press the ENTER<\/kbd> key) on an arrow, you move straight to the next (or previous) image. This effect can also be used to create a website that has several sections, each of which takes the full window’s height, where at each scroll you move the user to a new section. To achieve this goal, developers have always used JavaScript but the W3C has proposed a new standard called CSS Scroll Snap Points<\/a>.<\/p>\n","protected":false},"author":1,"featured_media":493,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[33],"tags":[48,15,45,43,11],"class_list":["post-404","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-trick-of-the-day","tag-css","tag-css3","tag-standard","tag-w3c","tag-web"],"jetpack_featured_media_url":"https:\/\/www.audero.it\/blog\/wp-content\/uploads\/2016\/06\/scrollbar.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9Or4e-6w","jetpack-related-posts":[{"id":56,"url":"https:\/\/www.audero.it\/blog\/2013\/07\/02\/how-to-solve-the-problem-of-font-face-inside-media-queries\/","url_meta":{"origin":404,"position":0},"title":"How to Solve the Problem of @font-face Inside Media Queries","author":"Aurelio De Rosa","date":"July 2, 2013","format":false,"excerpt":"Mobile connections aren't as good as the usual desktop ones, therefore the download time of custom fonts can take up to several seconds. A good approach is to use the @font-face rule only for certain range of media and screens using @media queries. Unfortunately this approach doesn't work for some\u2026","rel":"","context":"In "CSS"","block_context":{"text":"CSS","link":"https:\/\/www.audero.it\/blog\/category\/css\/"},"img":{"alt_text":"A page with custom font not completely downloaded","src":"https:\/\/i0.wp.com\/aurelio.audero.it\/blog\/wp-content\/uploads\/2013\/06\/aeon-megazine-mobile-168x300.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":329,"url":"https:\/\/www.audero.it\/blog\/2014\/09\/19\/resources-beginner-front-end-developers\/","url_meta":{"origin":404,"position":1},"title":"Resources for Beginner Front-end Developers","author":"Aurelio De Rosa","date":"September 19, 2014","format":false,"excerpt":"Few weeks ago I received an email from a developer asking me for suggestions on how to delve into the front-end world. After having replied to this email, I thought that it'd have been nice to share the same suggestions on my blog. That's exactly what you'll find in this\u2026","rel":"","context":"In "Discussions & Opinions"","block_context":{"text":"Discussions & Opinions","link":"https:\/\/www.audero.it\/blog\/category\/discussions-opinions\/"},"img":{"alt_text":"html5 css3 javascript logos","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2014\/09\/front-end-stack.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2014\/09\/front-end-stack.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2014\/09\/front-end-stack.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2014\/09\/front-end-stack.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2014\/09\/front-end-stack.png?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":387,"url":"https:\/\/www.audero.it\/blog\/2015\/05\/29\/trick-of-the-day-immutability-in-javascript\/","url_meta":{"origin":404,"position":2},"title":"Trick of the day: Immutability in JavaScript","author":"Aurelio De Rosa","date":"May 29, 2015","format":false,"excerpt":"In computer science there is a concept called Immutability. If you create an immutable object, once it's created you aren't allowed to change it anymore. This includes adding, modifying, or deleting a properties. For very simple situations, this concept isn't used a lot. However, if you start writing complex applications\u2026","rel":"","context":"In "Trick of the day"","block_context":{"text":"Trick of the day","link":"https:\/\/www.audero.it\/blog\/category\/trick-of-the-day\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":612,"url":"https:\/\/www.audero.it\/blog\/2016\/11\/29\/most-used-npm-commands\/","url_meta":{"origin":404,"position":3},"title":"My most used npm commands","author":"Aurelio De Rosa","date":"November 29, 2016","format":false,"excerpt":"If you're a front-end or a JavaScript developer, you're surely using npm. npm is a registry where people publish their software. At the beginning, it was used to share JavaScript libraries and frameworks, but today you can also find CSS frameworks, font icons, and much more. In addition to being\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/www.audero.it\/blog\/category\/javascript\/"},"img":{"alt_text":"npm","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/11\/npm.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/11\/npm.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/11\/npm.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/11\/npm.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":392,"url":"https:\/\/www.audero.it\/blog\/2015\/06\/01\/trick-of-the-day-css-counters\/","url_meta":{"origin":404,"position":4},"title":"Trick of the day: CSS counters","author":"Aurelio De Rosa","date":"June 1, 2015","format":false,"excerpt":"Have you ever heard of CSS counters? It's a feature of CSS for numbering non-consecutive items, wherever they might be in the DOM. It doesn't have a lot of uses cases but it's important to understand this kind of new features to understand how powerful is CSS today.","rel":"","context":"In "Trick of the day"","block_context":{"text":"Trick of the day","link":"https:\/\/www.audero.it\/blog\/category\/trick-of-the-day\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":170,"url":"https:\/\/www.audero.it\/blog\/2013\/09\/16\/15-tips-to-improve-your-jquery-selectors\/","url_meta":{"origin":404,"position":5},"title":"15 Tips to Improve Your jQuery Selectors","author":"Aurelio De Rosa","date":"September 16, 2013","format":false,"excerpt":"Who don't know what jQuery is and how it can help in developing a web project. Based on the latest statistics, jQuery is used on ~60% of the Quantcast Top 100k websites. We use it constantly and sometimes we tend to think it's almost magic, that jQuery is capable to\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/www.audero.it\/blog\/category\/javascript\/"},"img":{"alt_text":"jquery logo","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=1400%2C800&ssl=1 4x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts\/404","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/comments?post=404"}],"version-history":[{"count":5,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts\/404\/revisions"}],"predecessor-version":[{"id":492,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts\/404\/revisions\/492"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/media\/493"}],"wp:attachment":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/media?parent=404"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/categories?post=404"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/tags?post=404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}