headingsOffset does not work with scrollSmooth: true

[supun-io]

It works perfectly when scrollSmooth is false.

tocbot.init({
    ...
    headingsOffset: 75,
    scrollSmooth: false,
})

Result:

https://github.com/tscanlin/tocbot/assets/44988673/0b965389-d13d-4e72-921a-4b5a5b49b92a

The headingsOffset doesn't work correctly when scrollSmooth is true (and looks buggy as well)

tocbot.init({
    ...
    headingsOffset: 75,
    scrollSmooth: true,
})

https://github.com/tscanlin/tocbot/assets/44988673/f599e219-21ff-430d-9534-87a7ed96d448

All configurations I'm using:

 tocbot.init({
            // @ts-ignore
            tocElement: tocElement,
            contentSelector: '.docs .content-wrap',
            headingSelector: 'h2, h3, h4, h5, h6',
            orderedList: false,
            hasInnerContainers: true,
            headingsOffset: 75,
            scrollSmooth: true,
})

tocElement element is a sticky one, even though I don't think it should affect anything.

As a side issue, tocElement is missing in typescript definitions.

Let me know if you need any other details to track down the issue.

[tscanlin]

Hmm, thats a strange issue. Do you have an example site somewhere where I can see this reproduced?

[supun-io]

Working (no smooth scroll): https://hyvor-design.pages.dev Not working (with smooth scroll): https://scroll-smooth.hyvor-design.pages.dev

[tscanlin]

Thanks! Could you try using this config to handle the offsets:

tocbot.refresh({
    ...tocbot.options,
    headingsOffset: 70,
  scrollSmoothOffset: -70
})

Hope that helps!

[supun-io]

scrollSmoothOffset fixed it. I missed that in the docs. Sorry for the bother.

[tscanlin]

No worries, glad that fixed it!