fix(repeat): correct calculate distance to scroller for top buffer

Author: bigopon

src/utilities-dom.ts

@@ -35,3 +35,27 @@ export const hasOverflowScroll = (element: HTMLElement): boolean => {
   let style = element.style;
   return style.overflowY === 'scroll' || style.overflow === 'scroll' || style.overflowY === 'auto' || style.overflow === 'auto';
 }
+
+export const getDistanceToParent = (child: HTMLElement, parent: HTMLElement) => {
+  const offsetParent = child.offsetParent as HTMLElement;
+  const childOffsetTop = child.offsetTop;
+  // [el] <-- offset parent === parent
+  //   [el] <-- child
+  if (offsetParent === null || offsetParent === parent) {
+    return childOffsetTop;
+  }
+  else {
+    // [el] <-- offset parent
+    //   [el] <-- parent
+    //     [el] <-- child
+    if (offsetParent.contains(parent)) {
+      return childOffsetTop - parent.offsetTop;
+    }
+    // [el] <-- parent
+    //   [el] <-- offset parent
+    //     [el] <-- child
+    else {
+      return childOffsetTop + getDistanceToParent(offsetParent, parent);
+    }
+  }
+}

src/virtual-repeat.ts

@@ -36,7 +36,8 @@ import {
 } from './utilities';
 import {
   getElementDistanceToTopOfDocument,
-  hasOverflowScroll
+  hasOverflowScroll,
+  getDistanceToParent
 } from './utilities-dom';
 import { VirtualRepeatStrategyLocator } from './virtual-repeat-strategy-locator';
 import { TemplateStrategyLocator } from './template-strategy-locator';
@@ -565,7 +566,10 @@ export class VirtualRepeat extends AbstractRepeater {
     const topBuffer = this.topBufferEl;
     const scroller = this.scrollContainer;
     const itemHeight = this.itemHeight;
-    const topBufferDistance = topBuffer.offsetTop - scroller.offsetTop;
+    // If offset parent of top buffer is the scroll container
+    //    its actual offsetTop is just the offset top itself
+    // If not, then the offset top is calculated based on the parent offsetTop as well
+    const topBufferDistance = getDistanceToParent(topBuffer, scroller);
     const isFixedHeightContainer = this._fixedHeightContainer;
     /**
      * Real scroll top calculated based on current scroll top of scroller and top buffer {height + distance to top}