scroll-behavior-design

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.

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.