Improved index sidebar

[tunetheweb]

Fixes #454

[rviscomi]

A simpler way to scroll to the active index item:

index.scrollIntoView({behavior: 'smooth', block: 'center'})

We can do without the smooth scrolling if needed.

[tunetheweb]

Unfortunately can;'t use this as it scrolls the current element - which is fun when you have two scrolling elements like we do here! :-(

So works fine when clicking on the links in ToC, but not if focus is in main chapter text.

[tunetheweb]

Thanks for the awesome feedback @rviscomi - much cleaner code now and easier to read!

Unfortunately couldn't use scrollIntoView as that appears to only work to scroll current element and not the ToC when focus is in chapter text. Pity as it was much cleaner that way!

[rviscomi]

I got scrollIntoView working locally but as you say that might just have to do with where focus is at the time. I think we could get it working by temporarily moving focus to the index, but your solution is already working fine so I'm ok to leave it.

[tunetheweb]

I got scrollIntoView working locally but as you say that might just have to do with where focus is at the time. I think we could get it working by temporarily moving focus to the index, but your solution is already working fine so I'm ok to leave it.

OK found the answer on Stackoverflow. Basically any new scroll events that fire will interrupt scrollIntoView stop it from happening. So if you scroll using keyboard, or very slowly, it works. If you use a mouse scroll wheel (as I was doing!) or scroll fast it doesn't work. My solution doesn't suffer from this issue as doesn't use scrollIntoView so will stick with that.

Fixed those other comments so can you have another look and let me know if you spot anything else?

[rviscomi]

Great work! 👍