# Scroll Behavior Design

> Scroll-based interactions, scroll snapping, parallax alternatives, and scroll-linked animation.

- Skill: `dragoon0x/scroll-behavior-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/scroll-behavior-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/scroll-behavior-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/scroll-behavior-design

---


# Scroll Behavior Design

## Scroll Patterns

### Scroll Snap
```css
.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.
```css
.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.