Optimize scrolling event so it doesn't occure too frequently

microsoft · Sep 23, 2024 · 237fe57 · 237fe57
1 parent 671e895
commit 237fe57
Showing 1 changed file with 15 additions and 6 deletions.
diff --git a/src/timeLine.ts b/src/timeLine.ts
@@ -633,10 +633,17 @@ export class Timeline implements powerbiVisualsApi.extensibility.visual.IVisual
 
         this.addElements();
 
+        let ticking = false;
         this.rootSelection.on("scroll", (event) => {
-            const target = event.target as HTMLDivElement;
-            const scrollLeft: number = target?.scrollLeft || 0;
-            this.headerSelection.attr("transform", `translate(${scrollLeft}, 0)`);
+            if (!ticking) {
+                window.requestAnimationFrame(() => {
+                    const target = event.target as HTMLDivElement;
+                    const scrollLeft: number = target?.scrollLeft || 0;
+                    this.headerSelection.attr("transform", `translate(${scrollLeft}, 0)`);
+                    ticking = false;
+                });
+                ticking = true;
+            }
         });
     }
 
@@ -698,6 +705,7 @@ export class Timeline implements powerbiVisualsApi.extensibility.visual.IVisual
 
 
             this.adjustHeightOfElements(options.viewport.width);
+            this.resetScrollPosition();
 
             this.timelineGranularityData = new GranularityData(this.datePeriod.startDate, this.datePeriod.endDate);
 
@@ -1275,6 +1283,10 @@ export class Timeline implements powerbiVisualsApi.extensibility.visual.IVisual
             .attr("height", this.timelineProperties.legendHeight);
     }
 
+    private resetScrollPosition(): void {
+        this.headerSelection.attr("transform", null);
+    }
+
     private renderGranularityFrame(granularity: GranularityType): void {
         d3SelectAll("g." + Timeline.TimelineSelectors.TimelineSlicer.className).remove();
 
@@ -1399,9 +1411,6 @@ 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)