pelicin › web › CSS

Scroll

This page lists the CSS properties related to scroll and "scroll snapping".

Basic Concepts

Scroll Snapping

For scroll snapping, the basic idea is like this (CSS-Tricks):

<style>
  .container {
    scroll-snap-type: y mandatory;
  }
  .child {
    scroll-snap-align: start;
  }
</style>

<div class="container">
  <section class="child"></section>
  <section class="child"></section>
  <section class="child"></section>
</div>

Scroll Padding and Scroll Margin

Scroll padding and margin has the similar effect: they add space from the edge of the scrolling container when an element snapped into place.

The difference is that:

  • scroll-padding is normally specified on the container
  • scroll-margin is specified on individual children
Illustration of scroll-padding
Illustration of scroll-padding (Source: CSS-Tricks)

Block vs Inline Direction

These directions are based on writing-mode, direction, and text-orientation values. Also note that each directions have the "start" and "end" edge (e.g. inline-start, inline-end).

  • Inline direction — is the direction of writing (e.g. left-to-right, right-to-left, top-to-bottom). If you're writing left to right, then the inline-start = left side, inline-end = right.
  • Block direction — is the direction perpendicular to inline position (i.e. the direction of how you add new lines to your paragraph). If you're writing left to right, then top to bottom, then block-start: top, block-end: bottom.

Scroll Behavior Properties

scroll-behavior

Defines how to scroll to target (when triggered by the navigation).

  • auto — scroll to target instantly (default)
  • smooth — scroll to target smoothly
| LIVE PREVIEW

One

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Scroll Snapping Properties

scroll-snap-type

Defines how strictly snap points are enforced.

Specify a snapping axis (none, x, y, block, inline, or both), AND optionally a mandatory or proximity keyword.

  • mandatory — always snap to a snap point
  • proximity — only snaps to a snap point if it's "in proximity" (depends on the browser); may cause the scroll container to stop "in-between"
.scrollbox {
  scroll-snap-type: x;
  scroll-snap-type: x mandatory;
}

scroll-snap-align

Specifies which part of the element is supposed to snap to the container. (Only makes sense if the element to snap is larger than the container.)

"These are relative to the scroll direction. If you’re scrolling vertically, start refers to the top edge of the element. If you’re scrolling horizontally, it refers to the left edge. center and end follow the same principle." (CSS-Tricks)

Specify up to 2 values, representing the block and inline direction (if you only give 1 value, it will be used for both directions): none, start, center, end.

.scrollbox > .child {
  scroll-snap-align: none;
  /* <block-direction> <inline-direction> */
  scroll-snap-align: start end;
}

scroll-snap-stop

Only works on Chrome at the time of writing

Defined on a children element of a scroll container, determines if the user "can skip over several snap points before coming to a stop."

  • normal — can skip over this snap point (default)
  • always — can't skip over this snap points (must stop?)

scroll-padding

Sets scroll container's scroll padding (see picture below).

Shorthand for scroll-padding-top, scroll-padding-right, scroll-padding-bottom, scroll-padding-left (remember: clockwise direction).

Specify 1 to 4 lengths. (If you specified less than 4, it will attempt to make symmetrical margin.)

Illustration of scroll-padding
Illustration of scroll-padding (Source: CSS-Tricks)

scroll-padding-<side>

E.g. scroll-padding-top or scroll-padding-block-start.

Sets the scroll padding at the specified side.

scroll-margin

Offsets the children element from the scrolling container when it snapped into place. (You would normally specify this on individual scrolling container's child elements.)

Shorthand for scroll-margin-top, scroll-margin-right, scroll-margin-bottom, scroll-margin-left (remember: clockwise direction).

Specify 1 to 4 lengths. (If you specified less than 4, it will attempt to make symmetrical margin.)

Illustration of scroll-margin
Illustration of scroll-margin (Source: CSS-Tricks)

scroll-margin-<side>

E.g. scroll-margin-top or scroll-margin-block-start.

Sets the scroll margin at the specified side.

Assets

References