Scroll

CSS · Reference cheat sheet

📋 Overview

Scroll-related CSS controls overflow, scroll snapping, scrollbars, overscroll behavior, and scroll-driven interactions. Use it to create readable regions, carousels, sticky companions, and safer nested scroll areas. Prefer intentional overflow (auto / hidden) over accidental clipping, and always ensure keyboard and focusable content remain reachable inside scrollports.

Logical properties (overflow-inline, overflow-block) help in vertical and horizontal writing modes.

🔧 Core concepts

Overflow

Scroll snap

Scrollbars & utilities

💡 Examples

Scrollable panel

.panel {
  max-block-size: min(24rem, 70dvh);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

Horizontal snap carousel

.carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1rem;
  -webkit-overflow-scrolling: touch;
}

.carousel > .slide {
  flex: 0 0 min(80%, 20rem);
  scroll-snap-align: start;
}

Offset for sticky header anchors

:root {
  --header-h: 3.5rem;
}

.site-header {
  position: sticky;
  inset-block-start: 0;
  block-size: var(--header-h);
}

:target,
[id] {
  scroll-margin-block-start: calc(var(--header-h) + 0.5rem);
}

Smooth scroll with reduced motion

html {
  scroll-behavior: smooth;
}

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

⚠️ Pitfalls

• Putting overflow: hidden on ancestors and breaking position: sticky descendants.
• Nested scroll areas that trap scroll chaining—use overscroll-behavior: contain thoughtfully.
• scroll-behavior: smooth without a reduced-motion fallback.
• Snap carousels that hide focusable controls off-screen without keyboard alternatives.
• Custom WebKit scrollbar CSS that removes affordance or fails contrast checks.

🔗 Related

• Positioning
• Adaptive design
• Flexbox
• Hover