Long TOC scroll selected list element to view when content page is scrolled

[nithyasharabheshwara]

Hi,
Thank you for your amazing plugin. I was able to get exactly what I wanted with minimal effort. The initialization API is precise, concise with enough options. This what I was able to get.

This is a screenshot of a page of work in progress website, which will be documenting Hindu history.
Each webpage is like a chapter, and sometimes like a book, which if printed as a pdf can be anywhere between 30 to 300 pages.

So naturally when I make the TOC, it has several elements, and thus it needs a scrollbar.

That little bit I was able to manage, without much of an issue.
Everything looks fine, except, one thing.
As I scroll the page down further, eventually the highlighted/selected region of the document, is so far away from the top, that it is not visible in the TOC unless the TOC itself is scrolled. This I am doing manually. It would be great if it can be automated.

So when a scroll event is fired, which basically hides/unhides list-elements in the TOC, it should also do something like a scrollIntoView for the TOC, so that the TOC's scroll keeps pace with the actual document.
May be a flag in the api would be nice to have. Apart from this, TOCBOT is just perfect for what I needed.

[tscanlin]

Glad to hear Tocbot works for you! I’m currently on vacation and won’t be able to work on this feature, but if you’d like to try and make a pull request I’d be happy to take a look. Thanks for the suggestion!

[nithyasharabheshwara]

I wish I could. Front-end development is far from what I have done most of my life. Could you suggest some tips on how it could be done? If not now, may be later.

[tscanlin]

Hey, sorry for the delay in responding. I’ll be back from vacation in 3 weeks and once I’m back I can revisit what it would take to implement this feature.

Thanks for the suggestion though. I hope you have a happy start to the new year!

[tscanlin]

I've looked into implementing this and the code / complexity required for this feature is substantial. For now I'm going to hold off on this unless more people start asking for it. Thanks for the suggestion though.

[mengjade]

Hi tscanlin, I am interested in this feature, too! I used this amazing plugin to manage my notes, which has a long toc. When I scroll the content window, the highlighted scroll bar does not move and the interested list item is not in the current view. It would be great if the list element can be auto scrolled into view!

[nithyasharabheshwara]

The scroll sync feature for index and content in action - https://coda.io/developers/apis/v1beta1
They are using react scroll sync I think.

[xoofx]

I have implemented a workaround like this, and it seems to work fine:

  function UpdateVisibleToc() {
    var tocs = document.getElementsByClassName("js-toc");
      if (tocs.length > 0) {
        var activeItem = tocs[0].getElementsByClassName("is-active-li");
        if (activeItem.length > 0) {
          tocs[0].scrollTop = activeItem[0].offsetTop;
        }
      }
  }

  tocbot.init({
      // Where to render the table of contents.
      tocSelector: '.js-toc',
      // Where to grab the headings to build the table of contents.
      contentSelector: '.js-toc-content',
      // Which headings to grab inside of the contentSelector element.
      headingSelector: 'h2, h3, h4, h5',
      scrollEndCallback: e => UpdateVisibleToc(),
      collapseDepth: 3,
      orderedList: true,
    });

Wondering @tscanlin if that would be acceptable to integrate this as part of tocbot directly? (just before the scrollEndCallback is called)

[tscanlin]

Since this is an edge case but occasionally comes up, I'd be most open to just adding a util like make-ids to handle this use case. Here's a PR: https://github.com/tscanlin/tocbot/pull/197/files

[xoofx]

Forgot to add to the snippet this line (the most important! 😅 ), to synchronize the toc with the scroll:

  window.onscroll = () => UpdateVisibleToc();

In tocbot, the code would use directly the logic used to detect which area is scrollable and plug into the same callback.

Why do you think it would be a problem to integrate it transparently without the user having to plug it himself? Modifying scrolltop for the toc should not change the visual behavior if the jstoc is not scrollable.

[nithyasharabheshwara]

@xoofx @tscanlin you guys are great. This feature would be really awesome. Thank you so much.

[tscanlin]

@xoofx Thanks, I can add that to the readme. But I guess I'm hesitant to add it for all cases because it seems like its extra code that shouldn't be needed for 95%+ cases and it could potentially break some layouts. I would probably rather start with this and if there is more demand for it then add it in directly.

[xoofx]

@xoofx Thanks, I can add that to the readme. But I guess I'm hesitant to add it for all cases because it seems like its extra code that shouldn't be needed for 95%+ cases and it could potentially break some layouts. I would probably rather start with this and if there is more demand for it then add it in directly.

I agree that it's maybe better to not make it default... but, could we add a bool option instead to the existing options and activate it only in that case? That would be straightforward and easier for users, it would not expose the internal (the UpdateVisibleToc) but only an option, what do you think?

[tscanlin]

Apologies for the delay on this. I've decided to take your advice @xoofx and offer this as a built-in / default option that only applies when the toc is long and scrolling. What do you think?
https://github.com/tscanlin/tocbot/pull/197/files

[tscanlin]

Also, @shashaanktulsyan & @mengjade let me know if this serves your needs or if you have any comments on the PR.

[nithyasharabheshwara]

It looks good. I will try this and let you know.

[xoofx]

Apologies for the delay on this. I've decided to take your advice @xoofx and offer this as a built-in / default option that only applies when the toc is long and scrolling. What do you think?

Looks good 👍 , let's follow that on the PR directly