search

tscanlin / tocbot

Build a table of contents from headings in an HTML document.
MIT License
1.37k stars 114 forks source link

Tocbot links not activating in CSS grid layout #342

Closed jcwils closed 2 months ago

jcwils commented 2 months ago

Thanks for creating such a great project. I've been using tocbot for several years on my website and it works perfectly with standard CSS (relative, fixed and absolute positioning). I've updated my page to use CSS grids and now the active link does not get updated. The tocbot TOC is clickable, but the link doesn't become active, it also doesn't get updated on scroll. I think it's something to do with the class: .toc-link::before, I added bottom: 0 to prevent the left-hand column from expanding beyond its boundaries. If I remove bottom: 0, the links in the TOC get activated, but I can't click on them because the left-hand column scrolls away. I've created a jsfiddle with the issue. https://jsfiddle.net/funkydrummer/f17u9n8a/5/ Solved version: https://jsfiddle.net/funkydrummer/f17u9n8a/16/

Any help is really appreciated. Thanks

tscanlin commented 2 months ago

Hey! Always great to hear from people, glad you've found tocbot useful! :)

I think the reason its not working is because of the overflow: auto; on the main element. Tocbot and browsers want the body element to be scrollable (not main) in order to handle hash routing better. But it should still be possible to use CSS grid without having that property. Hope that helps!

jcwils commented 2 months ago

Thanks for the pointer, I removed overflow: auto; from the main element, but it's still not working. I'll keep at it and post here when I succeed.

tscanlin commented 2 months ago

It also needs to be removed from the js-toc-content element and any other elements in the tree so that the body element is the one scrolling. The toc can then be positioned with fixed. Hope that helps!

jcwils commented 2 months ago

Grid layout works now, I made a few other small changes to the css code and I updated the jsfiddle with a working example. Thanks very much for your help and for making tocbot!

tscanlin commented 2 months ago

Glad to hear you figured it out! 👍