# Loupe scroll

A scroll area whose scrollbar is a map of what it holds. A narrow machined rail runs beside the text with every line drawn small on its floor, headings darker and code as a box. A glass loupe rides over the part in view and shows it a little magnified. Drag the loupe to scroll, or press the rail to jump there; underneath it is a native scroll container.

Kit part · With the Kit · https://tactileui.dev/parts/loupe-scroll

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

The map is not a picture of the page but its line boxes. Headings are thicker and darker. There is no canvas.

## Variants

- Release notes
- A log, one line each
- Short: the loupe is most of the rail
- A narrow rail

## States

- At the top
- Halfway
- At the end
- Held

## Props and options

| Name | Kind | Description |
| - | - | - |
| label | attribute | Names the region that scrolls, which is in the tab order so the keyboard can scroll it. |
| refresh() | method | Redraw the map now. It redraws itself whenever the content or the box changes size, so this is rarely needed. |
| drag · press | pointer | Drag the loupe and the text scrolls with it; press the rail and the text moves to put that point in the middle. |
| loupeWindow · loupeScrollFor · loupeDrag · loupeScale · loupeLines · loupeKind | function | The rules, pure: where the loupe sits, where a press on the rail scrolls to, what a drag does, the map’s scale, runs of text joined into lines, and what a block is on the map. |

## Usage notes

Scroll the text and the loupe follows. Drag the loupe, or press anywhere on the rail to jump there. Click in the text and use the keys. Add a section and the map redraws itself.

## Accessibility

- The text is in a native scroll container, a region named by its label and in the tab order, so the wheel, touch, the arrow keys, Page Up and Down, Space, Home and End scroll it as they do anywhere.
- The rail is a picture and a pointer’s shortcut, as a scrollbar is: it is hidden from assistive technology and takes no focus, and there is nothing on it that scrolling does not reach.
- The browser’s scrollbar is hidden only while the map stands in for it. Without the script it is back.
- Headings on the map are heavier and darker than text, not another colour, in the finish’s own ink.
- A press on the rail glides to its place; with reduced motion it jumps.

## Related parts

- [Scroll area](https://tactileui.dev/parts/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.
- [Timeline](https://tactileui.dev/parts/timeline): An event log like the roll of a chart recorder. The rail is engraved down the plate and each event is a tick stamped across it, with its time in tabular figures and its words beside it. A lamp on the rail is the only colour, and a marker for the present separates what has happened from what is still to come.
- [File tree](https://tactileui.dev/parts/file-tree): Folders and files as a real tree, printed like a wiring diagram: traces with an elbow into every item, chevrons that turn, and the chosen file set in a recess with its lamp lit. Written as a plain nested list.