Skip to content

Eliminate layout work during TOC scrolling - #3677

Draft
reakaleek wants to merge 2 commits into
mainfrom
release-notes-content-visibility
Draft

reakaleek wants to merge 2 commits into
mainfrom
release-notes-content-visibility

Conversation

@reakaleek

Copy link
Copy Markdown
Member

Why

Long release-note pages contain hundreds of headings, and reading heading and TOC geometry while scrolling can repeatedly force expensive layout work. The active section should update without touching layout on the scroll path.

What

Cache heading and TOC geometry outside scrolling, then use binary searches over document positions to select the active links. Refresh the cache only when viewport or content layout changes, keep the progress indicator transform-only, and apply active styling directly to TOC items without descendant :has() matching.

Test plan

  • npm run test -- --runInBand Assets/toc-nav.test.ts
  • Pre-commit Prettier, TypeScript, and ESLint checks

Made with Cursor

Cache heading and TOC geometry outside the scroll path so long release-note pages remain responsive without changing active-section behavior.

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
_ApiToc.cshtml conflicted because main moved "On this page" into the
API right rail and rewrote the partial. I kept main's markup and
re-applied the branch's two class changes: transition-transform on the
progress indicator and [&.toc-current] on the item, which the branch's
toc-nav.ts now sets. Main's has-[.current] never matched, since no
element gets that class.

toc-nav.ts conflicted only on a comment that main reworded and the
branch deleted. I kept the branch's geometry-caching rewrite, which
merged cleanly with main's h2/h3/h4 data-section selector.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@github-actions

github-actions Bot commented Nov 4, 2026

Copy link
Copy Markdown
Contributor

Docs preview (local build)

Handbook preview: https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/3677/

This branch was successfully deployed

2 active deployments
docs-preview — 191634ef Deployed Nov 4, 2026 by github-actions[bot]
assembler-preview — 191634ef Deployed Nov 4, 2026 by github-actions[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants