Scroll Calculation Problem in Timeline Component

[Mireg-V]

Scroll Calculation Problem in Timeline Component

Issue Description

We are experiencing intermittent issues with scroll calculation in our Timeline component. The problem manifests as incorrect scroll positioning, sometimes resulting in unexpected lateral movement instead of the intended vertical scroll.

Observed Behavior

• Scroll values are sometimes calculated incorrectly, causing the viewport to shift horizontally instead of vertically.
• Log entries show sudden jumps in scroll values, indicating potential calculation errors.
• The issue appears to be more prevalent during rapid scrolling or when crossing certain thresholds in the timeline.

Example Log Output

Timeline.tsx:59 1.423828125 280 167
Timeline.tsx:59 1.601806640625 447 188
Timeline.tsx:59 1.802032470703125 461 190

In these log entries, we can see abrupt changes in the second and third values, which represent scroll positions. This inconsistency likely contributes to the incorrect scroll behavior.

Current Implementation

The current implementation uses a handleWheel function to process scroll events:

• It calculates a new scale based on the wheel delta.
• It determines the new scroll position using the current scroll, mouse position, and new scale.
• The scroll position is updated using a deltaScrollX function, which applies limits to the scroll range.

Potential Causes

1. Rounding errors or type conversion issues in scroll calculations.
2. Asynchronous state updates leading to inconsistent values.
3. Performance issues related to frequent calls to getBoundingClientRect().
4. Lack of smoothing or interpolation for scroll values, causing jumps.

Proposed Solutions

1. Implement a singleton ScrollManager class to centralize scroll state management.
2. Add checks for maximum allowed scroll change per event to prevent large jumps.
3. Use requestAnimationFrame for smoother scroll updates.
4. Cache and update getBoundingClientRect() values more efficiently.
5. Optimize the handleWheel function using useCallback.

Next Steps

• Implement and test the proposed solutions.
• Add more comprehensive logging to track scroll behavior over time.
• Consider adding unit tests to verify correct scroll calculations.

Additional Information

• Browser: Google Chrome