Scrolling tocbot and scrolling page about tocbot HOT 8 CLOSED

@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!!

from tocbot.

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?

from tocbot.

@tscanlin , @xoofx : Would you please suggest?

from tocbot.

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?

from tocbot.

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. :-)

from tocbot.

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.

from tocbot.

from tocbot.

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?

from tocbot.