CSS Scroll Snap: Native Galleries. Not Fake Pinning.

CSS Scroll Snap does not pin a section to the viewport. It defines positions where a scroll container can settle after a scroll operation. That is still excellent. It gives galleries and picker rails a native, dependency free feel without pretending every page needs a cinematic locked scroll.

Call it what it is, then use it where it shines: horizontally browsed work, feature cards, screenshots, and focused panels where every item remains a normal link in normal document order.

Build a useful horizontal rail

<ol class='work-rail' aria-label='Featured Velocity Components'>
  <li class='work-card'>
    <a href='/components/process-sticky/'>Process Sticky</a>
  </li>
  <li class='work-card'>
    <a href='/components/radial-gallery/'>Radial Gallery</a>
  </li>
  <li class='work-card'>
    <a href='/components/shader-backgrounds/'>Shader Backgrounds</a>
  </li>
</ol>

.work-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(16rem, 82vw);
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding-inline: 1rem;
  scroll-padding-inline: 1rem;
  scroll-snap-type: inline proximity;
}

.work-card {
  scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {
  .work-rail {
    scroll-behavior: auto;
  }
}

proximity respects fast reading and touch exploration. It may snap when the visitor finishes scrolling, but it does not demand that every movement land on a panel. Use mandatory only when skipping an item would make the interaction unclear.

Use stop points sparingly

scroll-snap-stop: always prevents a scroll from passing a snap point. It can be useful for a small set of major steps. It can also make a long rail feel trapped. Do not make it the global default because you saw it in a carousel demo.

.work-card[data-major-step] {
  scroll-snap-stop: always;
}

Choose the right tool for the job

• Scroll snap: settle a real scroll container on cards or panels.
• CSS sticky: hold a caption or media frame while nearby document content scrolls.
• ScrollTrigger: connect a specific animation timeline to scroll progress when the motion teaches something.

A full page snap container can interfere with reading, browser chrome, text zoom, and deep links. Prefer a smaller horizontal rail inside a conventional page. Visitors can then scan, click, tab, and leave it without fighting the site.

Velocity Components fit

Radial Gallery uses rich visual movement while preserving a usable item path. Scroll Snap is a strong simpler option when a component only needs a browsable horizontal sequence. Choose the smallest pattern that explains the work.

Accessibility checklist

• Use real links inside every card.
• Keep keyboard focus visible and make focused cards scroll into view.
• Do not hide a panel's only action outside the snapped viewport.
• Test touch, trackpad, keyboard, large text, and reduced motion.
• Use clear headings and an accessible name for the scroll region.

Sources and further reading

• MDN: basic scroll snap concepts
• MDN: scroll snap type
• MDN: scroll snap stop