Repository navigation
fix(toc): only auto-scroll the toc's own scroll container - #3542
Merged
segunadebayo merged 6 commits intoOct 26, 2026
Merged
Conversation
🦋 Changeset detectedLatest commit: f0a270b The changes in this PR will be included in the next version bump. This PR includes changesets to release 85 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
- Find the nearest ancestor that can actually scroll within the TOC. - Resolve percentage scroll padding against the scrollport. - Don't scroll items that already span the view.
- Search for the scroll container within the nav, so the content scroller is never picked. - Measure in the container's layout pixels so transforms don't skip the scroll.
- Add getNearestScrollOffset, which computes the scroll position without scrolling. - Handle both axes in scrollToNearest. - Scroll instantly when the user prefers reduced motion.
Keeps auto-scroll working with the older markup that spreads the root props on the nav.
- Find the TOC's scroll container with getScrollParent. - Stop at the element that holds the headings. - Add isScrollable and getScrollParent to dom-query.
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #3535
autoScrollTocusedscrollIntoView({ block: "nearest" }), which scrolls every scrollable ancestor. When the nav sits inside the same scroll container as the content, that also scrolls the content scroller and cancels the smooth scroll from a link click.Now it finds the nearest scroll container of the active item inside the TOC root and scrolls only that, using a new
scrollToNearesthelper indom-query(next toscrollToElement, as suggested in the issue). It accounts for borders, scroll-padding and scroll-margin, and does nothing when the item is already visible. If the TOC doesn't scroll on its own, nothing is scrolled, which also covers the page jumping to show the nav on short windows.Added a
toc/nested-navexample (sticky nav inside the content scroller) and the first TOC e2e tests:main, passes here)Before
before-toc-autoscroll.mp4
After
after-toc-autoscroll.mp4