fix: scroll on touch improvement

deriv-com · Aug 9, 2024 · 867499f · 867499f
1 parent a8bf8e3
commit 867499f
Showing 1 changed file with 15 additions and 4 deletions.
diff --git a/src/store/ChartAdapterStore.ts b/src/store/ChartAdapterStore.ts
@@ -41,10 +41,16 @@ export default class ChartAdapterStore {
         bottomIndex: 0,
     };
     touchValues: {
+        deltaYTotal?: number;
         x?: number;
         y?: number;
         yOnTouchEnd?: number;
-    } = {};
+    } = {
+        deltaYTotal: 0,
+        x: 0,
+        y: 0,
+        yOnTouchEnd: 0,
+    };
 
     isOverFlutterCharts = false;
     enableVerticalScrollTimer?: ReturnType<typeof setTimeout>;
@@ -247,28 +253,33 @@ export default class ChartAdapterStore {
         ) {
             const { pageX, pageY } = e.changedTouches[0];
             if (['touchstart', 'touchend'].includes(e.type)) {
-                this.touchValues = e.type === 'touchstart' ? { x: pageX, y: pageY } : { yOnTouchEnd: pageY };
+                this.touchValues =
+                    e.type === 'touchstart'
+                        ? { x: pageX, y: pageY }
+                        : { yOnTouchEnd: pageY, deltaYTotal: this.touchValues.deltaYTotal };
             } else if (e.type === 'touchmove') {
                 const nonScrollableAreaWidth = chartNode.offsetWidth - this.mainStore.chart.yAxisWidth;
                 const { left } = chartNode.getBoundingClientRect();
 
                 if (this.touchValues.x && this.touchValues.y) {
                     const deltaX = Math.abs(pageX - this.touchValues.x);
                     const deltaY = Math.abs(pageY - this.touchValues.y);
+                    this.touchValues.deltaYTotal = (this.touchValues.deltaYTotal ?? 0) + (this.touchValues.y - pageY);
                     const isVerticalScroll = deltaY > deltaX;
                     const x = pageX - left;
                     if (x < nonScrollableAreaWidth && isVerticalScroll && !this.scrollChartParentOnTouchTimer) {
                         this.touchValues.yOnTouchEnd = undefined;
                         this.scrollChartParentOnTouchTimer = setTimeout(() => {
                             this.scrollableChartParent?.scrollBy({
-                                top: pageY - Number(this.touchValues.yOnTouchEnd ?? this.touchValues.y),
+                                top: this.touchValues.deltaYTotal,
                                 behavior: 'smooth',
                             });
                             this.scrollChartParentOnTouchTimer = undefined;
+                            this.touchValues = { ...this.touchValues, deltaYTotal: 0 };
                         }, 100);
                     }
                 }
-                this.touchValues = { x: pageX, y: pageY };
+                this.touchValues = { ...this.touchValues, x: pageX, y: pageY };
             }
         }
     }