Fader
A continuous value along a line: a native range whose cap rides in a slot cut into the plate, with a printed scale.
Kit part · Scroll areas
Scroll area
A region that scrolls, with its scrollbar made as a machined rail: a groove cut into the plate and a thumb like a fader cap riding in it. Scrolling itself is the browser’s own.
- Element
- <div tabindex="0">
- Needs
- kit.css
- Rules
- scroll-area.rules.md · 4
- Finishes
- Aluminium · Graphite · Porcelain · Black
- Volumes
- Tactile · Quiet
Variants
- 13:58:02HubReserve raised to 20%
- 13:58:40Meter 2291Missed three readings
- 13:59:11HubMeter 2291 is back
- 14:02:31BatteryFull at 13.4 kWh
- 14:02:32GridExporting 2.1 kW at 15p
- 14:07:15CarBoost charge started
- 14:11:48Heat pumpDefrost cycle, 6 min
- 14:19:03HubTariff changed to Flux
- 13:58:02HubReserve raised to 20%
- 13:58:40Meter 2291Missed three readings
- 13:59:11HubMeter 2291 is back
- 14:02:31BatteryFull at 13.4 kWh
- 14:02:32GridExporting 2.1 kW at 15p
- 14:07:15CarBoost charge started
- 14:11:48Heat pumpDefrost cycle, 6 min
- 14:19:03HubTariff changed to Flux
- 13:58:02HubReserve raised to 20%
- 13:58:40Meter 2291Missed three readings
- 13:59:11HubMeter 2291 is back
- 14:02:31BatteryFull at 13.4 kWh
- 14:02:32GridExporting 2.1 kW at 15p
- 14:07:15CarBoost charge started
- 14:11:48Heat pumpDefrost cycle, 6 min
- 14:19:03HubTariff changed to Flux
- 13:58:02HubReserve raised to 20%
- 13:58:40Meter 2291Missed three readings
- 13:59:11HubMeter 2291 is back
- 14:02:31BatteryFull at 13.4 kWh
- 14:02:32GridExporting 2.1 kW at 15p
- 14:07:15CarBoost charge started
- 14:11:48Heat pumpDefrost cycle, 6 min
- 14:19:03HubTariff changed to Flux
KitchenHeat pumpBatterySolarCarGarageWorkshopBoilerGarden
- 13:58:02HubReserve raised to 20%
- 13:58:40Meter 2291Missed three readings
- 13:59:11HubMeter 2291 is back
- 14:02:31BatteryFull at 13.4 kWh
- 14:02:32GridExporting 2.1 kW at 15p
- 14:07:15CarBoost charge started
- 14:11:48Heat pumpDefrost cycle, 6 min
- 14:19:03HubTariff changed to Flux
Every state, at once
Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.
Aluminium
| Part | Rail at rest | Keyboard focus | Well | Edges |
|---|---|---|---|---|
| Scroll area |
|
|
|
|
Graphite
| Part | Rail at rest | Keyboard focus | Well | Edges |
|---|---|---|---|---|
| Scroll area |
|
|
|
|
API
| Name | Kind | Values | What it does |
|---|---|---|---|
| .tui-scroll-area | class | on a block | Overflow auto, contained overscroll, and the machined rail. Give it a height or max-height. |
| tabindex="0" · role="region" · aria-label | attribute | on the area | What lets the keyboard scroll it, and names it. Not needed if a focusable control is inside. |
| --y · --x | class | — | Scroll one axis only; the other is clipped. |
| --sm | class | — | A 10px rail in place of 14px. |
| --well | class | — | The window is cut into the plate: the recess, with 12px inside it. |
| --edges | class | — | A shade at the top or bottom edge only while there is more beyond it. Cover-and-shadow, no script. |
| --sa-rail · --sa-bg | CSS property | 14px · var(--tui-face) | The rail’s width; the colour the edge shade fades into when the area sits on something other than a panel. |
| ::-webkit-scrollbar-track · -thumb | pseudo-element | Chromium, Safari | The groove and the cap. Where they are not understood the fallback below is used. |
| scrollbar-width · scrollbar-color | CSS property | thin · ink on well | The fallback for browsers that cannot restyle scrollbar parts: a thin rail in the kit’s inks. |
| ↑ ↓ · Page Up / Down · Space · Home / End | keyboard | native | Scroll the focused area, as anywhere. |
Markup
<div class="tui-scroll-area tui-scroll-area--edges"
tabindex="0" role="region" aria-label="Hub log"
style="max-height: 220px">
<ol>…a long list…</ol>
</div>
<!-- Cut into the plate, sideways only -->
<div class="tui-scroll-area tui-scroll-area--well tui-scroll-area--x"
tabindex="0" role="region" aria-label="Circuits">
<div style="display:flex; gap:8px; width:max-content">…</div>
</div>Needs kit.css only, no script. How to install the kit.
Accessibility
- The keyboard scrolls what it can focus: an area with no focusable control in it takes
tabindex="0", androle="region"with anaria-labeltells a screen reader what it is. - It is the browser’s own scrolling, so the wheel, touch, momentum, Page Up and Down, Space and find-in-page work as people expect; nothing is intercepted.
- Focus shows as a 2px ring inside the edge, so a parent that clips its children cannot hide it.
- The edge shade is a second cue that there is more; on touch screens, where the rail is hidden, it is the only one.
- Smooth scrolling is on unless reduced motion is asked for.
How it’s built
The rail is the scrollbar’s own parts, dressed: the track is the kit’s recess drawn as a groove (dark under its upper wall, the lower lip lit) and the thumb is the fader cap from the fader part, a light-to-dark face, a lit top edge, a skirt inside its lower one and one ink line across the middle. A 3px transparent border keeps the cap off the groove’s walls, and background-clip: padding-box draws it inside them. Held, the cap loses its skirt. Firefox cannot restyle scrollbar parts, so it gets scrollbar-color in the kit’s inks. The edge shade is the classic cover-and-shadow pair of background layers.
Rules
scroll-area.rules.mdIn the brain
Give it a height, a name and a way in for the keyboard; the rail is only the dress.
4 rules in this file, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.