Oh Snap!
summary
Shows how CSS scroll-snap plus scroll-padding and scroll-margin actually build interfaces: slides that keep their position on rotate using snap-after-layout, a slide framework with deep nesting (five levels) and URL deep links, Chrome DevTools overlays for debugging, and hacks that work today — auto-slide with no JS (Chrome only), a simulated infinite scroll using IntersectionObserver, and a pull-to-refresh toy. Demos generally work live; a few features still await cross‑browser support per the Scroll Snap 2 draft.
AI-written summary · about
chapters (28)
- 0:00Introduction
- 0:43Scroll snap points
- 1:04Overflow and scrollers
- 3:53Scroll terms glossary
- 6:20Scroll snap basics
- 7:22DevTools for scroll snap
- 9:52Advanced scroll snap
- 10:55Single and nested scroll snap
- 12:41Trapping scroll behavior
- 13:22Scroll padding and margin
- 15:26Scroll into view
- 17:09Intersection observer with snap
- 18:57Scroll snap demos
- 19:58CSS slide framework
- 23:47Nested scroll snap points
- 24:51Tap to snap
- 26:35Infinite scroll simulation
- 27:39Translation technique
- 30:09Over-scroll effects
- 33:17Initial scroll position
- 36:02Pull to refresh
- 37:25Scroll timeline UI
- 38:47Date time selector
- 39:29Chat UI style
- 40:31Stories UI grid
- 41:15Gesture UIs
- 41:56What's next
- 44:43Q&A
