Scroll Sync between 2 Cdk virtual viewports header and row

Question

I'm using a separate CDK virtual scroll viewport for the header and need to keep it synchronized with the main row viewport. Currently, I'm using the elementScrolled event of the row viewport to track its horizontal scroll position via measureScrollOffset("left"). This value is stored in a signal, and in the effect of the header component, I call scrollToOffset() to update its scroll position accordingly.

While this approach ensures synchronization when scrolling stops, there are instances where the header lags slightly behind during scrolling. :angular: Can anyone suggest a better way to do this ? Also if i include the header as part of the same viewport then sticky header is an issue

Currently i tried using the built in elementScrolled event to set a signal with left offset. Using rxjs listener to scroll within the viewport is faster than the its built events that has a default denounce time of 10s .