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
- The
bodytag should have ascroll-snap-typeproperty set toy mandatory. This will define the rule of how strictly the snap points are enforced in the browser. Other thanmandatory, it can havenoneorproximityas 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. Theybeforemandatorytells on which axis the scroll-snap will be performed. - Still inside the
body, makeoverflow-ytoscroll. It could also have beenvisible,hiddenorauto, but we want to have the scrolling. - For the section, kindly add the
scroll-snap-alignproperty tostart.
<div class='container'>
<section class='child'></section>
<section class='child'></section>
<section class='child'></section>
...
</div>
.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.
.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.
.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:
.container {
scroll-snap-type: both mandatory;
}
Then, we define the top-left corner of each tile as a snap point:
.tile {
scroll-snap-align: start;
}
See More Articles On CSS