Reset scroll with scrollTop changes

diplodoc-platform · Feb 22, 2024 · 23b194e · 23b194e
1 parent da0d14c
commit 23b194e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/src/runtime/TabsController.ts b/src/runtime/TabsController.ts
@@ -98,11 +98,11 @@ export class TabsController {
         const updatedTabs = this.updateHTML({group, key});
 
         if (updatedTabs > 0) {
+            this.fireSelectTabEvent({group, key}, targetTab?.dataset.diplodocId);
+
             if (previousTargetOffset) {
                 this.resetScroll(targetTab, scrollableParent, previousTargetOffset);
             }
-
-            this.fireSelectTabEvent({group, key}, targetTab?.dataset.diplodocId);
         }
     }
 
@@ -155,9 +155,13 @@ export class TabsController {
         previousTargetOffset: ElementOffset,
     ) {
         const targetOffset = getOffsetByScrollableParent(target, scrollableParent);
+        const topDelta = targetOffset.top - previousTargetOffset.top;
+        const leftDelta = targetOffset.left - previousTargetOffset.left;
+        const scrollTopDelta = targetOffset.scrollTop - previousTargetOffset.scrollTop;
+        const scrollLeftDelta = targetOffset.scrollLeft - previousTargetOffset.scrollLeft;
         scrollableParent.scrollTo(
-            targetOffset.left + scrollableParent.scrollLeft - previousTargetOffset.left,
-            targetOffset.top + scrollableParent.scrollTop - previousTargetOffset.top,
+            scrollableParent.scrollLeft + leftDelta - scrollLeftDelta,
+            scrollableParent.scrollTop + topDelta - scrollTopDelta,
         );
     }
 

diff --git a/src/runtime/utils.ts b/src/runtime/utils.ts
@@ -19,6 +19,8 @@ export const getClosestScrollableParent = (element: HTMLElement): HTMLElement |
 export interface ElementOffset {
     top: number;
     left: number;
+    scrollTop: number;
+    scrollLeft: number;
 }
 
 export const getOffsetByScrollableParent = (
@@ -30,5 +32,7 @@ export const getOffsetByScrollableParent = (
     return {
         top: elementBounds.top - scrollableParentBounds.top,
         left: elementBounds.left - scrollableParentBounds.left,
+        scrollTop: scrollableParent.scrollTop,
+        scrollLeft: scrollableParent.scrollLeft,
     };
 };