Scroll snapping new property in CSS

on October 4, 2018
🔥 3044 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: , , , ,