fix(virtual-core): scroll to index doesn't scroll to bottom correctly

Author: piecyk

packages/virtual-core/src/index.ts

@@ -359,7 +359,6 @@ export class Virtualizer<
   scrollElement: TScrollElement | null = null
   targetWindow: (Window & typeof globalThis) | null = null
   isScrolling = false
-  private scrollToIndexTimeoutId: number | null = null
   measurementsCache: Array<VirtualItem> = []
   private itemSizeCache = new Map<Key, number>()
   private pendingMeasuredCacheIndexes: Array<number> = []
@@ -904,7 +903,7 @@ export class Virtualizer<
       toOffset -= size
     }
 
-    const maxOffset = this.getTotalSize() - size
+    const maxOffset = this.getTotalSize() + this.options.scrollMargin - size
 
     return Math.max(Math.min(maxOffset, toOffset), 0)
   }
@@ -943,19 +942,10 @@ export class Virtualizer<
 
   private isDynamicMode = () => this.elementsCache.size > 0
 
-  private cancelScrollToIndex = () => {
-    if (this.scrollToIndexTimeoutId !== null && this.targetWindow) {
-      this.targetWindow.clearTimeout(this.scrollToIndexTimeoutId)
-      this.scrollToIndexTimeoutId = null
-    }
-  }
-
   scrollToOffset = (
     toOffset: number,
     { align = 'start', behavior }: ScrollToOffsetOptions = {},
   ) => {
-    this.cancelScrollToIndex()
-
     if (behavior === 'smooth' && this.isDynamicMode()) {
       console.warn(
         'The `smooth` scroll behavior is not fully supported with dynamic size.',
@@ -972,50 +962,55 @@ export class Virtualizer<
     index: number,
     { align: initialAlign = 'auto', behavior }: ScrollToIndexOptions = {},
   ) => {
-    index = Math.max(0, Math.min(index, this.options.count - 1))
-
-    this.cancelScrollToIndex()
-
     if (behavior === 'smooth' && this.isDynamicMode()) {
       console.warn(
         'The `smooth` scroll behavior is not fully supported with dynamic size.',
       )
     }
 
-    const offsetAndAlign = this.getOffsetForIndex(index, initialAlign)
-    if (!offsetAndAlign) return
-
-    const [offset, align] = offsetAndAlign
-
-    this._scrollToOffset(offset, { adjustments: undefined, behavior })
-
-    if (behavior !== 'smooth' && this.isDynamicMode() && this.targetWindow) {
-      this.scrollToIndexTimeoutId = this.targetWindow.setTimeout(() => {
-        this.scrollToIndexTimeoutId = null
+    index = Math.max(0, Math.min(index, this.options.count - 1))
 
-        const elementInDOM = this.elementsCache.has(
-          this.options.getItemKey(index),
-        )
+    let attempts = 0
+    const maxAttempts = 10
 
-        if (elementInDOM) {
-          const result = this.getOffsetForIndex(index, align)
-          if (!result) return
-          const [latestOffset] = result
+    const tryScroll = (currentAlign: ScrollAlignment) => {
+      const offsetInfo = this.getOffsetForIndex(index, currentAlign)
+      if (!offsetInfo) {
+        scheduleRetry(currentAlign)
+        return
+      }
+      const [offset, align] = offsetInfo
+      this._scrollToOffset(offset, { adjustments: undefined, behavior })
+
+      requestAnimationFrame(() => {
+        const currentOffset = this.getScrollOffset()
+        const afterInfo = this.getOffsetForIndex(index, align)
+        if (!afterInfo) {
+          scheduleRetry(align)
+          return
+        }
 
-          const currentScrollOffset = this.getScrollOffset()
-          if (!approxEqual(latestOffset, currentScrollOffset)) {
-            this.scrollToIndex(index, { align, behavior })
-          }
-        } else {
-          this.scrollToIndex(index, { align, behavior })
+        if (!approxEqual(afterInfo[0], currentOffset)) {
+          scheduleRetry(align)
         }
       })
     }
+
+    function scheduleRetry(align: ScrollAlignment) {
+      attempts++
+      if (attempts < maxAttempts) {
+        requestAnimationFrame(() => tryScroll(align))
+      } else {
+        console.warn(
+          `Failed to scroll to index ${index} after ${maxAttempts} attempts.`,
+        )
+      }
+    }
+
+    tryScroll(initialAlign)
   }
 
   scrollBy = (delta: number, { behavior }: ScrollToOffsetOptions = {}) => {
-    this.cancelScrollToIndex()
-
     if (behavior === 'smooth' && this.isDynamicMode()) {
       console.warn(
         'The `smooth` scroll behavior is not fully supported with dynamic size.',

packages/virtual-core/src/utils.ts

@@ -83,7 +83,7 @@ export function notUndefined<T>(value: T | undefined, msg?: string): T {
   }
 }
 
-export const approxEqual = (a: number, b: number) => Math.abs(a - b) <= 1
+export const approxEqual = (a: number, b: number) => Math.abs(a - b) < 1.01
 
 export const debounce = (
   targetWindow: Window & typeof globalThis,