Snap a user-scroll smoothly to specific points with CSS

Guide the scroll to continiously stop at your HTML-element(s) upon users scroll och finger-swipes. Works horizontally as vertically.

The container-element needs scroll-snap-type inserted into it's style. Children need scroll-snap-align inserted into their style.

// HTML

<div class="container">
  <div class="child">First</div>
  <div class="child">Second</div>
</div>

// CSS

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

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

• Container has multiple scroll-snap types/properties to choose from. They are divided as:

  • Behaviour: Mandatory or proximity
  • Direction: x, y, block, inline or both

• Example above wants the scroll-snap to be for vertical (y) scrolling and align at childs position.

---

• Child has multiple scroll-snap-align properties to choose from. They are divided as:

  • none, start, center, end

• Example above wants the scroll to stop at the beginning of each child-element.

---

3 januari 2023