From 4f832461d3996adaa12f5408cbba4cfc49a9715c Mon Sep 17 00:00:00 2001
From: Adilet Soronov <74559101+adiletelf@users.noreply.github.com>
Date: Mon, 23 Sep 2024 16:54:13 +0600
Subject: [PATCH] Fix the bug with header not moving on scrolling horizontally

---
 CHANGELOG.md    | 3 +++
 src/timeLine.ts | 9 +++++++++
 2 files changed, 12 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b4d71c1..0a52dbf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,6 @@
+## 2.5.9
+* Fix the bug with header not moving on scrolling horizontally
+
 ## 2.5.8
 * Fix the bug with dragging cursors
 
diff --git a/src/timeLine.ts b/src/timeLine.ts
index f1bcafa..b3325ec 100644
--- a/src/timeLine.ts
+++ b/src/timeLine.ts
@@ -632,6 +632,12 @@ export class Timeline implements powerbiVisualsApi.extensibility.visual.IVisual
             .classed(Timeline.TimelineSelectors.TimelineVisual.className, true);
 
         this.addElements();
+
+        this.rootSelection.on("scroll", (event) => {
+            const target = event.target as HTMLDivElement;
+            const scrollLeft: number = target?.scrollLeft || 0;
+            this.headerSelection.attr("transform", `translate(${scrollLeft}, 0)`);
+        });
     }
 
     public clearUserSelection(): void {
@@ -1392,6 +1398,9 @@ export class Timeline implements powerbiVisualsApi.extensibility.visual.IVisual
 
         this.renderTimeRangeText(timelineData, settings.rangeHeader);
 
+        // reset scroll position
+        this.headerSelection.attr("transform", null);
+
         this.rootSelection
             .attr("drag-resize-disabled", true)
             .style("overflow-x", Timeline.DefaultOverflow)