Problems with TOCs

[cornae]

To make a TOC, two methods can be used: pat-navigation or pat-scroll.

The desired behaviour consists of 3 parts.

1. Scrolling needs to be smooth.
2. Upon click of a TOC item, the TOC item must be highlighted (class current or similar).
3. Upon scrolling, the highlighting of the TOC must be updated.

Pat-navigation

1. ✅ Perfect, but only when native scrolling of browser is used with CSS.
2. ✅ Perfect.
3. ❌ Doesn't happen.

Adding TOC update behaviour to pat-navigation would be great. Suggested automatic classes:

in-view to highlight any TOC element of which its corresponding element is currently in view. (Can be multiple at the same time)
in-view-latest to highlight the TOC element that entered the latest. (Always only one at the time)

Pat-scroll

1. ✅ Only perfect when not used in combination with CSS smooth scrolling. Otherwise both scrolling methods compete.
2. ❌ Erratic behaviour.
3. ❌ Doesn't update or in other situations it does, but erratic.

Would be solved if:

• Bugs 2 and 3 would be fixed.
• A property would be added to disable JavaScript animated scrolling. Suggested property: animation: none/auto.

[cornae]

Per our call:

scroll-marker-side: top // Side of element that scrolls. top/bottom/middle/auto (default 'top')
scroll-marker-distance: 100px; // Distance from side of scroll box. any amount in px or % (default '50%')

The element of which the given side (default top side) is the closest to the baseline, which is positioned at the distance from the top of the scroll box specified with the scroll-marker-distance property.

[thet]

Closed with:

• Add scrollspy functionality to pat-navigation. #1143
• fix(pat scroll-marker): Use the correct scroll container #1146
• Fix scroll marker unescaped #1149
• Implement review comments #1150
• scrum-1106 cleanup: Remove scrolling position detection from pat-scroll #1152
• fix(pat navigation): Fix current marker anchors with child elements. #1159

As per call:
scroll-item-side,
scroll-item-distance,
etc.