The new CSS Scroll Snap Points spec<\/a> promises to help, allowing for this kind of behavior using very few lines of CSS. <\/p>\n As happens with very new web tech, this spec has changed over time. There is “old” and “new” properties and values. It’s promising though, as support<\/a> has shot up quickly. I’ll teach you how to get the widest support in this in-between stage.<\/p>\n <\/p>\n The demo below has horizontal scrolling. It’s responsive: each “panel” is the width and height of the viewport (thanks to It uses a polyfill<\/a>, but in order to use it (and support is still low enough that I suggest you do), you have to support the “old” values, which is why I’ll cover them, too. <\/p>\n See the Pen Simple Responsive Scroll Snap Point Demo<\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\n Note I’m using Autoprefixer<\/a> in the Pen to automatically give me all the necessary vendor-prefixed properties.<\/p>\n Here’s the code used to make the magic:<\/p>\n Pretty slim! Let’s break down these properties one by one.<\/p>\n A The From what I\u2019ve seen playing around with this, This property refers to how an element\u2019s scroll snap margin aligns with its parent scroll container. It uses two values, Heads up, This property relates to the scroll container in the visual viewport. It works much like normal padding, with the same kind of value order. For example, As mentioned, the spec has been changing rapidly in the past year and there are already properties that are considered outdated, though are still good to know from a legacy support standpoint.<\/p>\n \u00a0 See the Pen Simple Scroll Snap Points<\/a> by Sarah Drasner (@sdras<\/a>) on CodePen<\/a>.<\/p>\n This property and This property allows you to specify at what point in the viewport the scroll should snap. For instance, say you want to cheat out your content by 100px so that two one panel is teased to one side of the other. The diagram below shows how it the scroll snap destination will allow you to easily adjust this parameter.<\/p>\n When defined as a percentage, the point is relative to the width and height of the scroll container.<\/p>\n This property allows you to specify where the scroll should snap to an element. The position amount refers to the element\u2019s border box. You might not need it unless you\u2019re doing something pretty fancy. These last two properties, Polyfilled Demo<\/h3>\n
vh<\/code> and vw<\/code> units). <\/p>\n\n
.scroller {\r\n \r\n scroll-snap-type: x mandatory;\r\n\r\n \/* older spec implementation *\/\r\n scroll-snap-destination: 0% 100%;\r\n scroll-snap-points-x: repeat(100%);\r\n}\r\n\r\n.page {\r\n scroll-snap-align: start;\r\n}<\/code><\/pre>\nCurrent CSS Scroll Snap Properties<\/h3>\n
scroll-snap-type<\/h4>\n
scroll-snap-type: none | mandatory | proximity; <\/code><\/pre>\nmandatory<\/code> value is what you might think it would mean: that the element must<\/em> come to rest on a snap point even when there are no active scrolling actions taken. If the content is somehow modified or updated, the page finds the snap point again.<\/p>\nproximity<\/code> value is close to mandatory<\/code>, but less strict. If the browser changes in size or content are added, it may or may not find the snap point again, depending on how close to a snap point it is.<\/p>\nmandatory<\/code> is more commonly supported in browsers at this time with more consistent behavior.<\/p>\nscroll-snap-align<\/h4>\n
scroll-snap-align: [none | start | end | center] [none | start | end | center]; <\/code><\/pre>\nx<\/code> and y<\/code>, and if you only use one value it will be read as shorthand and repeated for both values (sort of like padding where padding: 10px;<\/code> equals padding: 10px 10px 10px 10px;<\/code>). This property isn’t animatable.<\/p>\n![scroll-snap-align](https://calendarstemplates.com/\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/02\/scroll-snap-align-1.jpg\")
<\/figure>\nscroll-snap-padding<\/del>scroll-padding<\/ins><\/h4>\nscroll-snap-padding<\/code> has been renamed<\/a> to scroll-padding<\/code>.<\/p>\nscroll-snap-padding: <length> | <percentage>;\r\nscroll-padding: <length> | <percentage>;<\/code><\/pre>\nscroll-padding: 75px 0 0;<\/code> would be top padding of 75px<\/code> and all others 0<\/code>. This property is animatable, so if you need to move scroll snap align, this would be a good way to do so.<\/p>\nOlder CSS Scroll Snap Properties<\/h3>\n
scroll-snap-points<\/h4>\n
scroll-snap-points-<x or y>: none | repeat(<length>); <\/code><\/pre>\n
\nscroll-snap-point<\/code> addresses the axis that is the direction of the scroll. In the first Pen we saw, this property is set on the x<\/code> axis. Here, we have it on the y<\/code> axis (since it\u2019s a vertical scroll) using scroll-snap-points-y: repeat(100%);<\/code> The percentages refer to the padding box of whatever you\u2019ve defined as the scroll container.<\/p>\nscroll-snap-destination<\/h4>\n
scroll-snap-coordinate<\/code> are very similar as far as values go. Where scroll-snap-destination<\/code> refers to the parent element, scroll-snap-coordinate<\/code> refers to the element<\/em> itself. You might only need scroll-snap-destination<\/code> to be specified if the snapping point is specified purely by the element rather than the container it sits in.<\/p>\nscroll-snap-destination: <position>;<\/code><\/pre>\n![scroll-snap-destination](https://calendarstemplates.com/\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/02\/ssd1.jpg\")
<\/figure>\nscroll-snap-coordinate<\/h4>\n
Scroll-snap-coordinate: none | <position>;<\/code><\/pre>\nscroll-snap-coordinate<\/code> is the only value that can apply to all elements on the page, all other scroll snap properties apply only to scroll containers.<\/p>\n![scroll-snap-coordinate](https://calendarstemplates.com/\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/02\/ssd.jpg\")
<\/figure>\nscroll-snap-destination<\/code> and scroll-snap-coordinate<\/code> are animatable<\/strong> properties, while scroll-snap-type<\/code> and scroll-snap-points<\/code> — More Resources<\/h3>\n