Topic 23 of 30
Overflow & Scrolling
Overview
The overflow property controls what happens when content exceeds its container. Modern CSS offers sophisticated scrolling control including smooth scrolling, scroll snap, and custom scrollbars for premium UX.
Syntax
css
/* overflow basics */
overflow: visible; /* default: content shows outside */
overflow: hidden; /* clips content, hides scrollbar */
overflow: scroll; /* always shows scrollbar */
overflow: auto; /* shows scrollbar only when needed */
overflow: clip; /* like hidden but no scroll via JS */
/* Axes separately */
overflow-x: auto;
overflow-y: hidden;
/* Smooth scrolling */
html { scroll-behavior: smooth; }
/* Scroll snap */
.carousel {
overflow-x: auto;
scroll-snap-type: x mandatory;
display: flex;
}
.slide {
flex: 0 0 100%;
scroll-snap-align: start;
}
/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #1a1a1a; }
::-webkit-scrollbar-thumb { background: #FFD700; border-radius: 3px; }Common Pitfalls
- overflow: hidden on a parent clips all positioned descendants — this is why dropdowns disappear. Use overflow: clip instead for layout containment.
- overflow: auto adds scrollbar space even when not scrolling (on Windows) — this can cause layout shift. Use overflow: overlay in Chrome.
- Interview tip: scroll-snap-type requires scroll-snap-align on children — without both, snap doesn't work.
Real-World Example
A notes sidebar with custom scrollbar and a horizontal card carousel:
example
css
/* Notes sidebar with elegant scrollbar */
.notes-sidebar {
height: calc(100vh - 64px);
overflow-y: auto;
scrollbar-width: thin; /* Firefox */
scrollbar-color: #FFD700 #1a1a1a; /* thumb track — Firefox */
}
/* WebKit scrollbar */
.notes-sidebar::-webkit-scrollbar { width: 4px; }
.notes-sidebar::-webkit-scrollbar-thumb {
background: rgba(255, 215, 0, 0.4);
border-radius: 2px;
}
/* Horizontal scroll carousel with snap */
.featured-courses {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-left: 20px;
padding-bottom: 16px; /* space for scrollbar */
-webkit-overflow-scrolling: touch; /* momentum scroll iOS */
}
.course-card {
flex: 0 0 280px;
scroll-snap-align: start;
}