Doesn't quite work in Edge / IE11 about tocbot HOT 13 CLOSED

I have tested with 3.0.2 and 3.0.5 in offline documents and confirm this still exists in 3.0.5.

from tocbot.

Hey, thanks for reporting this @danyill! I have a fix for it here:
#69

Really appreciate the detailed report 👍

from tocbot.

Fixed in 3.0.6.

from tocbot.

Thank you so much for such a magically speedy response. I confirm this corrects this issue in both browsers mentioned above.

Alas, that only brings me to my next problem which I think may be related (it may be better in another issue, but I think it is intimately related to the same code).

In my application I have a rather long table of contents in a sidebar (based on the Asciidoctor default stylesheet). I have set the collapseDepth to 6 because the feature of tocbot that I want (for now) is for the table of contents to highlight the entry the user is on.

Because the table of contents in the sidebar scrolls beneath the screen, I seek to relocate the sidebar position (vertically) to always be showing a bit before and a bit after the present TOC entry.

To achieve this, I use the following:

scrollEndCallback: function (e) { 
console.log('hi'); 
document.getElementsByClassName('is-active-link')[0].scrollTop += 100; 
document.getElementsByClassName('is-active-link')[0].scrollIntoView({ behavior: 'smooth' });  
},

This works delightfully in Chrome (version above). With the code above, as I scroll I get console log entries caused by the scrollEndCallback.

In both IE and Edge I get no log entries, implying that the scrollEndCallback is never called.

from tocbot.

I'm sorry to hear you are still having trouble with this, but I'll try to help. However, I am unable to reproduce the issue, it works fine for me. Can you provide a test case or example of the scrollEndCallback failing to be called?

from tocbot.

Thank you for your kind offer of help.

This rather long gist contains tocbot 3.0.6 embedded (so ignore the missing resource for tocbot and many other things) and should be a reasonable representative use case if not a concise example (I mainly produce offline documentation with some imperfections in the way resource loading occurs due to toolchain constraints)

On line 2428 I have:

scrollEndCallback: function (e) { document.getElementsByClassName('is-active-link')[0].scrollTop += 100; tocbot.refresh(); console.log('hi i am a scrollback'); document.getElementsByClassName('is-active-link')[0].scrollIntoView({ behavior: 'smooth' });  }

By the time I've scrolled top to bottom in Chrome I have:

In Edge / IE I have nothing. It makes no difference if I reduced the callback to only the console.log statement.

from tocbot.

I tried to load it up but didn't see any console.log in chrome.. Can you host this example somewhere?

I tried your callback and it worked fine for me in chrome and IE. But maybe tocbot doesn't like really long content. Does the highlighting still work? Maybe its adjusting the scroll position in the callback thats causing issues. You could try wrapping that in a setTimeout. Hope that helps.

from tocbot.

The highlighting does still work. The gist I think is too big to update in the online editor so when I added the console.log I think it failed to save.

Zip file with html inside attached.

Setting_Guide.zip

from tocbot.

It appears you are still running with the older version. (e&&0===e.eventPhase||t)

The new code should contain 0===e.eventPhase||null===e.currentTarget

See: https://raw.githubusercontent.com/tscanlin/tocbot/master/dist/tocbot.min.js

Hope that fixes it.

from tocbot.

from tocbot.

Yeah, it appears it didn't publish properly. I just published 3.0.7 which should solve the issue.

from tocbot.

Thank you.

I confirm that 3.0.7 is correct and scrollback now works more or less nicely (the scrollTop doesn't quite work in IE and Edge but it does at least track the TOC in the sidebar with the main document).

Have a good weekend 😄

from tocbot.

Great, glad to hear that! :)

You have a good weekend too.

from tocbot.