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.

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.

• 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.
• The loupe is never shorter than 18px, so it can still be caught in a long document.