Skip to content

Commit

Permalink
Make the nav sidebar's scroll-to-current-page behaviour less jumpy
Browse files Browse the repository at this point in the history
This avoids scrolling the sidebar when the link is already in view by
using "nearest" for the vertical axis ("block") instead of the default
of "start".  This behaviour is much better when clicking on items in the
current viewport, especially if the current viewport matches the initial
viewport.

It's still a little jumpy when the current link isn't visible in the
initial viewport, because the sidebar position still changes across page
loads.  But the new behaviour solves the big problem on initial home
page loads with a long sidebar where the logo and project title would be
immediately scrolled out of view.

Related to #824.
  • Loading branch information
tsibley committed Jul 8, 2022
1 parent 0da22b8 commit aff50d9
Showing 1 changed file with 9 additions and 1 deletion.
10 changes: 9 additions & 1 deletion src/theme.js
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,15 @@ function ThemeNav () {
.addClass('current')
.attr('aria-expanded','true');
}
link[0].scrollIntoView();
/* Scroll the link's top-level parent into view first. Then
* scroll the link itself into view, which will only have an
* effect if the top-level parent is taller than the viewport
* and the link is still outside the viewport after the first
* scroll. (This seems likely to be rare.)
*/
link.closest('li.toctree-l1')[0]
.scrollIntoView({block: "nearest"});
link[0].scrollIntoView({block: "nearest"});
}
}
catch (err) {
Expand Down

0 comments on commit aff50d9

Please sign in to comment.