search

tscanlin / tocbot

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

Overscroll support #301

Closed roryabraham closed 1 year ago

roryabraham commented 1 year ago

Hi 👋🏼

This is a feature request that I think would make this library better overall.

tocbot already supports behavior where the current section header will be highlighted in the table of contents as you scroll down. However, it currently will not scroll the table of contents if you highlight a header which is out of view in the table on contents.

Furthermore, it's impossible to ever actually highlight the last item in the table of contents.

This issue is difficult to describe but obvious when you actually experience it. Here's an example

tscanlin commented 1 year ago

Hi, thanks for opening this issue. In the past I've recommended that people include some bottom margin/padding to allow the toc to scroll down for the headers near the bottom of the page.

Other solutions would require adding code to cover some special cases for determining which toc item to highlight when scrolled to the bottom of the viewport but it still wouldn't allow for scrolling to those headers. Additionally, then if you touched the scroll at all by even a few pixels it could cause the currently highlighted option in the toc to jump around, so maybe you'd want to add some pixel allowance or something.

I've thought through this a bit but haven't gotten around to implementing anything because of some of the above nuances which may be tricky to solve for. I still think adding a footer / bottom padding is the best/simplest way to go. But if you have the time and ideas around how to implement this I'd definitely be open to a PR.

Thanks for using tocbot and making this suggestion!

dcrossleyau commented 1 year ago

We get around this by adding a div spacer to the content, with CSS to add padding-bottom 6em. The panel that holds the ToC is fixed position, and also has a bottom spacer 50em. See example-1 and example-2.

Note that Firefox sometimes has trouble on normal browser window width when linking directly to such a URI fragment identifier. Safari is okay.

Thanks to Tim for the wonderful Tocbot, and the effort that you put in to support.

tscanlin commented 1 year ago

You are welcome! Happy to provide support. Glad to hear you figured out a way to work around this!