Scroll Snap

Scroll Snap enables content on a webpage to "snap" into place when users scroll, creating a more intuitive scrolling experience. It’s especially useful for carousels or sections of a webpage that need to stay aligned after scrolling. Scroll Snap works by defining specific scroll positions for elements within a scrollable container. Key properties include scroll-snap-type and scroll-snap-align.

• scroll-snap-type: This property sets the scroll snapping behavior for the container. It accepts values like x, y, or block, as well as mandatory or proximity, which determine the snapping axis and how strictly the container adheres to snap points. More examples on MDN.

• scroll-snap-align: Applied to child elements, this property defines their alignment within the scrollable area. Common values include start, center, and end, determining the alignment when snapping. MDN example.

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

In this example, the container snaps its items to the center along the vertical axis (y). As users scroll, the content automatically aligns to the nearest snap point.

Overscroll Behavior

overscroll-behavior controls how scrollable elements behave when reaching their scroll boundary. It can prevent default browser actions like bounce effects or scrolling the entire page when a scrollable container reaches its edge. This is particularly useful for creating a better scrolling experience in single-page applications.

The property accepts auto, contain, and none. auto retains default behavior, contain prevents scroll overflow from propagating, and none fully disables scroll chaining.

.modal {
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

In this example, when users reach the scroll boundary of a modal window, overscroll-behavior: contain prevents scrolling from affecting the page outside the modal. This is especially useful for controlled scrolling behavior in modals or sidebars.

To prevent Chrome on Android from refreshing the page when scrolling past the top, set this on the html element:

html {
  margin: 0;
  overscroll-behavior: none;
}

Scrollbar Gutter

When using overflow: auto, a scrollbar appears when content overflows, potentially causing layout shifts. This can negatively impact text readability. The scrollbar-gutter property allows you to reserve space for the scrollbar, avoiding unnecessary visual shifts.

Common values include auto, stable, always, and both. auto provides default behavior, stable ensures space for the scrollbar even when it's not visible, and always keeps the scrollbar visible, preventing layout changes.

Note that the gutter itself doesn’t have a color—it’s set to gray here for differentiation. Additionally, the second optional parameter, both-edges, allows you to create symmetrical gutters on both sides.

Overflow Anchor

overflow-anchor helps control scroll anchoring behavior within scrollable elements, preventing unwanted scroll jumps. Scroll anchoring adjusts the scroll position to keep dynamic content visible, such as appearing numbers.

It accepts auto (default) and none. auto allows the browser to adjust the scroll position as needed, while none disables this behavior, keeping the scroll position fixed when content loads dynamically.

Subscribe to Premium to read the rest.