CSS Scroll Snap Module Level 1

https://www.w3.org/TR/css-scroll-snap-1/
Admin
CSS Scroll Snap Module Level 1 provides CSS features to control panning and scrolling behavior by...
Tokens:9,446
Snippets:62
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### Paginated document with proximity snap positions

Source: https://www.w3.org/TR/css-scroll-snap-1

Builds a paginated document with proximity snap positions. The CSS uses scroll-snap-align: start none to align page tops, scroll-padding to offset snap positions by 100px, and scroll-snap-type: y proximity to allow stopping mid-page while still snapping near positions. The HTML provides the scroll container with four pages.

```css
.page {
    /* Defines the top of each page as the
       edge that should be used for snapping */
    scroll-snap-align: start none;
}
.docScroller {
    width: 500px;
    overflow-x: hidden;
    overflow-y: auto;
    /* Specifies that each element’s snap area should
       align with a 100px offset from the top edge. */
    scroll-padding: 100px 0 0;
    /* Encourages scrolling to end at a snap position when the
        operation completes, if it is near a snap position */
    scroll-snap-type: y proximity;
}

```

```html
<div class="docScroller">
    <div class="page">Page 1</div>
    <div class="page">Page 2</div>
    <div class="page">Page 3</div>
    <div class="page">Page 4</div>
</div>

```

--------------------------------

### Enable scroll snapping to headings with scroll-snap-type and scroll-snap-align

Source: https://www.w3.org/TR/css-scroll-snap-1

Enables snapping to headings in the block axis (y axis for horizontal writing, x axis for vertical writing) on the main document scroller. The scroll-snap-type property is set to 'block' on the html element, and scroll-snap-align is set to 'start' on heading elements to snap to the start (top) of the viewport.

```css
html {
  scroll-snap-type: block;   /* applied to main document scroller */
}
h1, h2, h3, h4, h5, h6 {
  scroll-snap-align: start;  /* snap to the start (top) of the viewport */
}
```

--------------------------------

### Photo gallery with mandatory snap positions

Source: https://www.w3.org/TR/css-scroll-snap-1

Creates a photo gallery with mandatory element-based snap positions. The CSS sets scroll-snap-align to center each image in the X axis and scroll-snap-type to x mandatory, ensuring the scroll always completes with an image centered. The HTML provides the gallery container with five images.

```css
img {
    /* Specifies that the center of each photo
       should align with the center of the scroll
       container in the X axis when snapping */
    scroll-snap-align: none center;
}
.photoGallery {
    width: 500px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    /* Requires that the scroll position always be
       at a snap position when the scrolling
       operation completes. */
    scroll-snap-type: x mandatory;
}

```

```html
<div class="photoGallery">
    <img src="img1.jpg">
    <img src="img2.jpg">
    <img src="img3.jpg">
    <img src="img4.jpg">
    <img src="img5.jpg">
</div>

```

--------------------------------

### Center slideshow images with scroll-padding and fixed toolbar

Source: https://www.w3.org/TR/css-scroll-snap-1

Uses scroll-padding to center slideshow images within the scrollport area not obscured by a fixed-position toolbar. The toolbar is 500px wide on the right, and the scroll-padding shorthand sets a 500px right offset so snap positions align to the visible region.

```css
html {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 500px 0 0;
}
.toolbar {
    position: fixed;
    height: 100%;
    width: 500px;
    right: 0;
}
img {
    scroll-snap-align: none center;
}
```

--------------------------------

### Keep log console snapped to bottom with scroll-snap-type: proximity

Source: https://www.w3.org/TR/css-scroll-snap-1

Use this CSS to keep a log console snapped to the bottom of its scroll container when the user is near that edge. The ::after pseudo-element creates a snap area at the bottom, and the proximity strictness allows snapping only when the user scrolls near it. If the user scrolls away, the container does not snap, and dynamic content additions keep it snapped to the same area.

```css
.log {
  scroll-snap-type: proximity;
  align-content: end;
}
.log::after {
  display: block;
  content: "";
  scroll-snap-align: end;
}

```
Tokens:
Raw