Arbitrary Redesign of the System Scrollbar
summary
Shows how to replace the native visual scrollbar while preserving the browser’s native scrolling by hiding the system bar and drawing a custom one. Compares two strategies (many emulators that replace scrolling vs few that keep it), and presents the Baron library (≈6 KB plus a 4 KB DOM helper) which computes scrollbar size from offsetWidth−clientWidth, makes minimal DOM changes, exposes CSS-driven styling and plugins (sticky headers, buttons, pull-to-refresh), requires calling update after async content changes, and is used in production to deliver smoother, native-feeling scrolling.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 1:30Why customize scrollbar
- 3:16Scrollbar customization methods
- 5:45Baron principles
- 9:03CSS control
- 10:25Code optimization
- 12:36Plugin extensibility
- 15:54Comparison with alternatives
- 21:36First usage steps
- 22:20Baron advantages
- 23:29Development plans
- 24:57Q&A
related talks
38mRock’n’Scroll
52mLevel, Up your Scroll UX
53mScroll-Enhanced Experiences
51mCross-browser Virtual Scrolling
36mStop using JS for that: moving features from JS to CSS & HTML
30mvirtual-scroller: Let there be less (DOM)
40mStop using JavaScript for that - Moving features from JS to CSS and HTML
30mStop using JS for that: Moving features to CSS and HTML