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 b8535ae
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 2 deletions.
2 changes: 1 addition & 1 deletion sphinx_rtd_theme/static/js/theme.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 9 additions & 1 deletion src/theme.js
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 b8535ae

Please sign in to comment.