Scrolling tocbot and scrolling page

[kapooramit]

Hi @tscanlin ,

On long pages, the tocbot output overflows so one needs to scroll down the page to see it. So I added scrollbar to the tocbot output. Now, when the page is too long and tocbot has scrollbars visible, the page scrolling highlights the headings fine but if it happens to be in the tocbots overflowing content, it stays hidden untill I scroll the tocbot div.

I tried calling the following from console in browser and it works as expected to show the right heading in tocbot but wherever I put in in code - in window.onscroll or after page ready or after tocbot.init - it doesnt work.

//Scroll 'On this page' panel to the currently active heading
$('#stickytoc').scrollTop($('.is-active-link').offset().top);

In a way, I want the above to happen everytime the .is-active-link class moves up or down.

Is this expected behavior because both content container and tocbot container are scrolling separately? In anycase, is there a way out of this?

-Amit

[kapooramit]

Ok. I found this: #114

So I tried and here is the code that is not working for me:

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

            //Initialize tocbot
            tocbot.init({
                tocSelector: ".js-toc",
                contentSelector: ".js-toc-content",
                headingSelector: "h2,h3,h4",
                hasInnerContainers: false,
                collapseDepth: 4, 
                scrollSmooth: true,
                scrollSmoothDuration: 420,
                headingsOffset: 100,
                scrollSmoothOffset: -100,
                scrollEndCallback:  e => UpdateVisibleToc(),
            });

But if I change UpdateVisibleToc() to the following, it works but not smoothly as it should:

function UpdateVisibleToc() {
       $('#stickytoc').scrollTop($('.is-active-link').offset().top);
}

I am not sure what I am doing wrong so here is the gif showing what's happening...

Here is the html code

     <div id="onthispage_wrapper">
         <div id="onthispageheader">
              On this page
         </div>
         <div class="ks-onthispage" id="stickytoc">
              <nav class="ks-stickytoc js-toc" id="onthispage"></nav>
         </div>
      </div> 

#onthispageheader and #stickytoc are fixed. To ensure that #stickytoc doesn't bump into the footer when footer is coming up, I calculate its height using footer.top as soon as footer becomes visible and apply it using JavaScript shown below;

function setOnThisPageBottom (){

    var footer = document.getElementById("copyright").getBoundingClientRect();
    var footerTop = footer.top;
    var tocbotBottom = document.getElementById("stickytoc").getBoundingClientRect().bottom;

    if (footerTop < window.innerHeight)
    {
        var onThisPageHeight = (footerTop - 200);
        $("#stickytoc").css({ height: onThisPageHeight });
    }
    else
    {
        document.getElementById("stickytoc").style.height = "";    
    }
}

The above function is set to be called after DOM is ready (page loaded) as well as on scrolling.
So now the question is what will work in my case?

[kapooramit]

@tscanlin , @xoofx : Would you please suggest?

[tscanlin]

hmm, this functionality should be built into tocbot itself since the above PR you mentioned merged. If you make the height of the window small and test here it should work and scroll the toc:
http://tscanlin.github.io/tocbot/
PR: https://github.com/tscanlin/tocbot/pull/197/files

Can you share a link / example that reproduces this so we can try to help? Maybe try using behavior: scroll-smooth css would help on that container?

[kapooramit]

Hi @tscanlin - thank you. I tried with scroll-behavior: smooth but no go. As always, because the code is IP protected, I have sent you email with link to live site. I have disabled my custom code to handle the syncing, that is, the following one is now disabled assuming tocbot should have handled this natively:

function UpdateVisibleToc() {
       $('#stickytoc').scrollTop($('.is-active-link').offset().top);
}

I also tried reducing the height of the window and scrolling but still the same.

Eagerly waiting for your response! Thank you. :-)

[tscanlin]

Hey, thanks for sharing the example!

Can you try adding the following properties to .js-toc:

overflow-y: auto; /* could also be 'scroll' */
height: 200px;

If you want the toc to be a different height you could do something like calc(100vh - 300px) instead. Choosing a smaller height is just easier for testing.

Hope that helps! Let me know if you are still running into issues.

[kapooramit]

Hi Tim, You are a magician! 😊. And that means my issue is resolved 😊 . It works flawlessly now. THANK YOU SO MUCH! One use case that I need to handle now is that scrolling the tocbot output manually should not scroll the content (.js-toc-content). Before I start working on it – is at also assumed to happen already 😊 ?

…

-Amit

[tscanlin]

Glad I've bee helpful! :)

Though I'm not sure what you mean by "scrolling the tocbot output manually should not scroll the content"

Could you share a video perhaps to help explain?

[kapooramit]

@tscanlin: Thanks for asking. I fixed it. What I meant was that if I manually scroll only the tocbot container, the page (js-toc-content) should not scroll with it. I managed to do it by checking when mouse enters the tocbot div area and at that time, stop content from scrolling. And when it comes out, I enabled content scrolling.

Thanks again!!