Scroll snapping new property in CSS

on October 4, 2018
๐Ÿ”ฅ 4640 views
Contents hide
1) Whatโ€™s a Scroll Snapping Property in CSS ?
2) Browser support
2.1) Desktop
2.2) Mobile / Tablet
3) Usage
3.1) Vertical โ€“ Scroll Snapping Property
3.2) Horizontal โ€“ Scroll Snapping Property
3.3) Both X and Y โ€“ Scroll Snapping Property

Whatโ€™s a Scroll Snapping Property in CSS ?

Scroll snapping is the act of adjusting the scroll offset of a scroll container to be at a preferred snap position once the scroll operation is finished.

That means, even if you are attempting to scroll at your own desired position on a web-page implementing this, that section of the web-page can automatically snap to a specific section. within the demo given above you will observe that Iโ€™m trying to scroll down from on section to another (differentiated by the background colors), however as presently as I reach to a particular starting or ending of the section, the browser itself overrides my scroll location to no matter written in the web-pageโ€™s code.

Browser support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Chrome Opera Firefox IE Edge Safari
69 No 64 11* 18* 11

Mobile / Tablet

iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox
11.0-11.2 No No 67 69 62

Usage

Vertical โ€“ Scroll Snapping Property

  1. The body tag should have a scroll-snap-type property set to y mandatory. This will define the rule of how strictly the snap points are enforced in the browser. Other than mandatory, it can have none or proximity as its value. Weโ€™ll use mandatory, because, well we really need a strict rule so that the user is not able to scroll any further. The y before mandatory tells on which axis the scroll-snap will be performed.
  2. Still inside the body, make overflow-y to scroll. It could also have been visible, hidden or auto, but we want to have the scrolling.
  3. For the section, kindly add the scroll-snap-align property to start.
HTML

<div class='container'>
    <section class='child'></section>
    <section class='child'></section>
    <section class='child'></section>
    ...
</div>
CSS

.container {
    scroll-snap-type: y mandatory;
}
.child {
    scroll-snap-align: start;
}

CodePen.

Horizontal โ€“ Scroll Snapping Property

To make a horizontal slider, we tell the container to snap on its x-axis. Weโ€™re also using scroll-padding to make sure the child elements snap to the middle of the container.

CSS

.container {
    scroll-snap-type: x mandatory;
    scroll-padding: 50%;
}

Then, we tell the container which points to snap to. To center the gallery, we define the middle point of each element as a snap point.

CSS

.child {
    scroll-snap-align: center;
}

Both X and Y โ€“ Scroll Snapping Property

Scroll snapping can work in two directions at the same time. Again, we can set scroll-snap-type directly on the <body> element:

CSS

.container {
    scroll-snap-type: both mandatory;
}

Then, we define the top-left corner of each tile as a snap point:

CSS

.tile {
    scroll-snap-align: start;
}


See More Articles On CSS

Tags: , , , ,