2d:I[902115,["/_next/static/immutable/chunks/26xcb9yuv4-q9.js","/_next/static/immutable/chunks/1iv8g77zll1c3.js","/_next/static/immutable/chunks/05ibr6udxyg_a.js"],"InstallCommand"] 2e:I[434085,["/_next/static/immutable/chunks/26xcb9yuv4-q9.js","/_next/static/immutable/chunks/1iv8g77zll1c3.js","/_next/static/immutable/chunks/05ibr6udxyg_a.js"],"CollapsibleReadme"] 2f:T43d,

Scroll Behavior Design

Scroll Patterns

Scroll Snap

.container {
  scroll-snap-type: y mandatory; /* or x, or proximity */
}
.section {
  scroll-snap-align: start;
}

Use for: full-page sections, image galleries, card carousels.

30:T50b,

Scroll-Linked Animation

Reveal elements as they enter viewport.
Use IntersectionObserver (not scroll event listeners).
Subtle fade + translateY is the safest bet.
Don't animate on every scroll pixel (performance).

Sticky Elements

Sticky headers: useful for long pages.
Sticky sidebars: useful for comparison pages.
Sticky CTAs: useful for long forms or product pages.

.sticky { position: sticky; top: 0; }

Anti-Patterns

Parallax that causes motion sickness.
Scroll hijacking (overriding native scroll speed).
Animations that play on every scroll (jarring on scroll up).
Infinite scroll without position memory.

scroll-behavior-design

Scroll Behavior Design

Scroll Patterns

Scroll Snap