Mini timeline: Multiple dots highlighted when scrolling fast

[yepzdk]

Description

When scrolling quickly through the project page, multiple dots in the mini timeline navigation can become highlighted simultaneously. Only one dot should be active at any given time.

Screenshot

Root Cause Analysis

The issue is in web/themes/custom/hoeringsportal/assets/js/timeline.js in the initScrollTracking function (lines 136-159).

The IntersectionObserver is configured with:

• rootMargin: "-30% 0px -30% 0px" (middle 40% of viewport)
• threshold: 0 (fires as soon as any part enters)

When scrolling fast, multiple timeline cards can enter the intersection zone simultaneously. The callback processes all intersecting entries:

entries.forEach((entry) => {
  if (entry.isIntersecting) {
    const { cardId } = entry.target.dataset;
    updateActiveNavLink(cardId);
  }
});

This can result in visual glitches where multiple dots appear highlighted before the browser completes style updates.

Suggested Fix Options

1. Track only the most visible element - Use an array of thresholds and compare intersectionRatio to find the most visible card
2. Debounce the update - Add a small debounce to updateActiveNavLink calls to prevent rapid successive updates
3. Find single best match - Instead of updating for each intersecting entry, find the entry with highest intersectionRatio in the batch and only update once

Steps to Reproduce

1. Navigate to a project page with a timeline
2. Scroll quickly up and down through the timeline cards
3. Observe the mini timeline navigation dots

Expected Behavior

Only one dot should be highlighted at a time, representing the currently most visible timeline card.

Actual Behavior

Multiple dots can become highlighted simultaneously during fast scrolling.

[yepzdk]

Fixed by PR #615