=== Description
Currently the table of contents bolds the section you are currently reading. The intention behind this feature is that it makes the table of contents a more useful "map" of the article, providing a sort of "you are here" type indicator whenever you look at it. For articles with really tall ToCs (example: [[ https://en.wikipedia.org/wiki/Paris?useskin=vector-2022 | Paris ]]), as you scroll down the page you eventually get to a section in the article that is not visible in the ToC.
To illustrate this, watch as I scroll past the "Demographics" section on the Paris article:
{F34944495}
The active/current section is still being bolded, but you cannot see it because it's offscreen.
=== Solution
If the table of contents is taller than the screen, and someone scrolls to a section of the article that is not currently visible in the table of contents, the table of contents should automatically scroll itself so that the current section is in view.
Here is a basic illustration of this concept on an earlier table of contents prototype:
{F34944496}
=== Acceptance criteria
[ ] the bolded section heading in the ToC should always be visible on screen
=== Developer notes
It's possible to leverage [[ https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView | Element.scrollIntoView() ]] so that the current active state of the TOC section is visible within the view port as it corresponds to the visibility of the main content section while scrolling.
Initial testing of this method inside the `activateSection()` function of `tableOfContents.js` seems to produce the desired effect:
```
tocSection.scrollIntoView( { block: 'center' } );
```
Purportedly the options parameter is not supported in Safari, but preliminary testing seems to indicate otherwise. Pending design review, we may want to experiment with the different optional parameters that define properties like scrolling behavior,It may be that older versions of [[ https://stackoverflow.com/questions/65552682/scrollintoview-is-not-working-as-expected-in-safari-browser | Safari are not supported ]]. block positioning, etcSeems that people have had success with this [[ https://www.npmjs.com/package/seamless-scroll-polyfill | polyfill ]] in the wild.
There is no IE support for this method but presumably the no-js solution for sticky TOC will suffice for this use case - otherwise we would need to use a [[ https://www.npmjs.com/package/scroll-into-view | polyfill ]].
Pending design review, we may want to experiment with the different optional parameters that define properties like scrolling behavior, block positioning, etc.