sphinx_rtd_theme icon indicating copy to clipboard operation
sphinx_rtd_theme copied to clipboard

Make the nav sidebar's scroll-to-current-page behaviour less jumpy

Open tsibley opened this issue 2 years ago • 3 comments

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.


Quick video demonstrating before/after.

tsibley avatar Mar 29 '22 23:03 tsibley

Hi @tsibley, thank you for submission! This probably needs more in-depth testing with multiple platforms and edge cases, but I think it can greatly improve the user experience with the sidebar.

nienn avatar Mar 30 '22 07:03 nienn

@nienn Yep, understood about testing! Data on caniuse.com shows pretty good support for {block: "nearest"} relative to browser-usage across the board, with the notable exception of Safari (on macOS and iOS).

image

I suspect (but haven't tested) that when the options object parameter isn't supported, as in Safari, it will be treated as a truthy value for the alignToTop boolean parameter and so will in effect act like the current behaviour.

Would be good to test all this empirically, of course. Does RTD have the resources to do this?

tsibley avatar Mar 31 '22 16:03 tsibley

Repushed after rebasing onto the current tip of master and also regenerating the built theme.js asset so it matches the source file.

tsibley avatar Jul 08 '22 17:07 tsibley