shadcn.io is not affiliated with official shadcn/ui
Scrolling Article Table of Contents Blog Block for Vue
A framed, fixed-height essay with six sections beside a rail that follows the section in view with a sliding bar, and a Jump to select on phones; choosing a section scrolls the essay, never the page.
Installation
Overview
A long read with a table of contents for Vue with Ark UI, written for Spineline, a long-form writing lab. A compact header sits over a split behind a divider: at the start a framed article of fixed height with six headings that scrolls inside its frame, and at the end a rail listing the sections. A bar slides to the section in view as you read, and "Section 3 of 6" says where you are. Choosing a section scrolls the article and nothing else, so the page never jumps. The article is a labelled, focusable scroll region that comes first in the DOM, so it can be read with a keyboard; on a phone the rail becomes a "Jump to" select above the article that follows the section in view. It uses Toc, Select and Guides, with CSS for the entrance.
FAQ
How do I use my own article?
Replace SECTIONS at the top of the file: each section has an id (the heading's anchor), a title and its paragraphs. The rail, the select, the outline passed to Toc and "Section 3 of 6" are all built from that one list, so adding a section adds it everywhere.
Why doesn't the page scroll when I choose a section?
The article is its own scroll box, and the table of contents is told to scroll that box (scrollEl) instead of the window. Selecting a section, in the rail or in the select, moves only the article. For a real post, drop the fixed height and the scrollEl, and the same rail follows the page.
How does it know which section is in view?
Toc watches the headings inside the article as you scroll and marks the one nearest the top; the first and last sections are held at the ends of the scroll. The bar is a single element that slides and resizes with a CSS transition, and it jumps without animating under reduced motion.
What replaces the rail on a phone?
A Select labelled "Jump to a section", above the article. It shows the section in view and scrolls the article when you choose another. Keyboard and screen reader users on any width can also read the article directly, since it is a focusable region with its own label.