Level, Up your Scroll UX
summary
Promises incremental, concrete fixes: one-line color tweaks, ::-webkit-scrollbar tricks, and about fifty lines of CSS that actually align and inset thumbs. Covers over/underscroll control with overscroll-behavior, scroll-driven animations for edge shadows and fade-in/out, container queries plus scroll state queries to know which item is snapped. Shows progressive enhancement across Chrome/Firefox/Safari, uses scrollbar-color fallback and a little JavaScript for snap events and sounds, and builds two polished scrollers plus a Switch-style demo that all work.
AI-written summary · about
chapters (16)
- 0:00Introduction
- 1:07Why scrollers matter
- 3:52Problems with default scrollers
- 8:04Scroll bar types and behaviors
- 10:30Nested vs root scrollers
- 13:18Essential scroller structure
- 16:07Colorizing scroll bars
- 22:00Containerization for scrollers
- 23:00Adding scroll buttons
- 27:12Scroll shadows with CSS
- 30:19Scroll animations for content
- 33:04Building vertical scroller
- 37:39Finishing Switch demo
- 43:39Advanced scroll animations
- 45:24Fun scroll effects
- 46:26Q&A
related talks
38mRock’n’Scroll
53mScroll-Enhanced Experiences
50mOh Snap!
39mModern CSS for Creative Developers
30mArbitrary Redesign of the System Scrollbar
36mScroll-Driven Animations with CSS
26mLess Cruft, More Power: Leverage the Power of the Web Platform
01h 04mLiven up your websites with Scroll-Driven Animations & View Transitions