Presentation
Scroll Views
A surface that owns its own scrollable viewport, with a custom track and gripper instead of the browser default.
Findings
What's actually in /ig
- .uiScrollableArea{height:100%;overflow:hidden;position:relative} plus .uiScrollableAreaWrap{overflow-y:scroll} is the legacy desktop scroll container.
- .uiScrollableAreaTrack{width:7px} and .uiScrollableAreaGripper{border-radius:7px;transition:width .25s} define a custom-styled scrollbar that widens on hover/drag.
- Mobile galleries instead hide the native scrollbar entirely (scrollbar-width:none / hidden ::-webkit-scrollbar).
Usage
When to use it
Use when
Use for any surface with content taller than the viewport that needs styled scrolling, including legacy desktop panes, modal bodies, and long result lists.
Avoid when
Avoid on touch-first galleries where the evidenced treatment hides scrollbars entirely and relies on native momentum.
Anatomy
Anatomy
- 01
Scroll container
- 02
Content
- 03
Track (7px)
- 04
Gripper (widens on interaction)
Specification
Spacing, colour, type, and motion
- Container
- .uiScrollableArea height:100%; overflow:hidden; position:relative
- Wrapper
- .uiScrollableAreaWrap overflow-y:scroll
- Track width
- 7px
- Gripper radius
- 7px border radius
- Gripper transition
- width .25s
- Mobile
- scrollbar-width:none and hidden ::-webkit-scrollbar
States
States
| State | Behaviour |
|---|---|
| Default | Track is hidden or minimal while content scrolls inside its viewport. |
| Hover | Pointer hover reveals the custom track and gripper. |
| Dragging | The gripper widens during drag, following the documented width transition. |
| Touch | Scrollbar is hidden entirely and native momentum handles scrolling. |
Examples
Real interface compositions
Explore filters
Horizontal filter chip scroller
Photography, Food, Travel, and Reels chips move in a native horizontal scroll view; touch hides the scrollbar, while desktop can expose the legacy custom gripper.
overflow-x auto, mobile hidden scrollbar, width transition gripper on desktop
Guidance
Usage guidance
- On desktop/legacy surfaces, use a custom 7px track + gripper that widens on hover, not the unstyled native scrollbar.
- On mobile, hide the scrollbar entirely and rely on touch momentum — don't show a custom gripper on touch.
Do / Don't
Do / Don't
Do
- Widen the gripper on hover/drag, matching the documented transition:width .25s.
Don’t
- Show a visible custom scrollbar on a mobile/touch gallery — every mobile instance hides it.