Right Scrollbar not scrolling with the page

[ashdal08]

First of all, thank you to the contributors for this wonderful sphinx theme.

As per the documentation, the right sidebar scroll behavior should be as follows.

The fancy bit is that Gumshoe.js is used to highlight the currently active heading (which heading is the content at the top pixel under). This is combined with some custom JS to scroll to the currently active heading in the toctree, which results in the contents sidebar scrolling with the user as they go.

But this is not happening with my generated docs. The highlighted entry does change with scrolling, but on scrolling further the highlighted entry is out of the page. The right sidebar scroll position jumps to it's bottom when the main content scroll position is at the bottom.

I would also like to know if the navigation depth of the toctree shown in the right sidebar can be specified in the theme options.

[dgw]

As per the documentation, the right sidebar scroll behavior should be as follows.

The fancy bit is that Gumshoe.js is used to highlight the currently active heading (which heading is the content at the top pixel under). This is combined with some custom JS to scroll to the currently active heading in the toctree, which results in the contents sidebar scrolling with the user as they go.

But this is not happening with my generated docs. The highlighted entry does change with scrolling, but on scrolling further the highlighted entry is out of the page. The right sidebar scroll position jumps to it's bottom when the main content scroll position is at the bottom.

I can reproduce this in furo 2024.5.6 on a page with sufficient content to add a scrollbar to the right sidebar. Personally, I think this is a great catch; it's a subtle issue that I never thought to test for.

I would also like to know if the navigation depth of the toctree shown in the right sidebar can be specified in the theme options.

There is not. #289, #557, #566, and perhaps other threads go into why.

[ashdal08]

I figured it out!!!! With some help from Chat-GPT of course. I've never programmed with JS.😅

The furo.js is to be modified as per the attached file.
furo js script.txt

The CSS style of toc-tree-container is to be modified as follows in a custom css.
.toc-tree-container { padding-bottom: var(--toc-spacing-vertical); max-height: 100vh; overflow: auto; scroll-behavior: smooth; }

The scroll position of the toc-tree-container class ìs controlled rather than the toc-scroll class, thereby keeping the 'On this page' division within the window while scrolling.

Now the right sidebar with the toc entries scrolls with the page and maintains the highlighted entry at 25% from the top of the browser window. Initially it broke the 'Back to top' button but that has been fixed too.

I could only test this for my generated docs. The variable names and formatting of 'furo.js' is modified heavily. I am trying to see if there are bugs due to this process.

I hope this solution is applicable for all general cases.