@humanspeak/svelte-virtual-list 0.4.4 → 0.4.5

package/dist/utils/virtualList.d.ts

@@ -62,6 +62,11 @@ export declare const calculateScrollPosition: (totalItems: number, itemHeight: n
  * @param {number} totalItems - Total number of items in the list
  * @param {number} bufferSize - Number of items to render outside the visible area
  * @param {SvelteVirtualListMode} mode - Scroll direction mode
+ * @param {boolean} atBottom - Whether the list is scrolled to the bottom (unused, legacy parameter)
+ * @param {boolean} wasAtBottomBeforeHeightChange - Whether the list was at bottom before a height change (unused, legacy parameter)
+ * @param {SvelteVirtualListPreviousVisibleRange | null} lastVisibleRange - Previous visible range (unused, legacy parameter)
+ * @param {number} [totalContentHeight] - Pre-calculated total content height; defaults to totalItems * itemHeight
+ * @param {Record<number, number>} [heightCache] - Cache of measured item heights keyed by index, used in topToBottom mode to walk actual heights instead of dividing by average
  * @returns {SvelteVirtualListPreviousVisibleRange} Range of indices to render
  */
 export declare const calculateVisibleRange: (scrollTop: number, viewportHeight: number, itemHeight: number, totalItems: number, bufferSize: number, mode: SvelteVirtualListMode, atBottom: boolean, wasAtBottomBeforeHeightChange: boolean, lastVisibleRange: SvelteVirtualListPreviousVisibleRange | null, totalContentHeight?: number, heightCache?: Record<number, number>) => SvelteVirtualListPreviousVisibleRange;

package/dist/utils/virtualList.js

@@ -66,6 +66,11 @@ export const calculateScrollPosition = (totalItems, itemHeight, containerHeight)
  * @param {number} totalItems - Total number of items in the list
  * @param {number} bufferSize - Number of items to render outside the visible area
  * @param {SvelteVirtualListMode} mode - Scroll direction mode
+ * @param {boolean} atBottom - Whether the list is scrolled to the bottom (unused, legacy parameter)
+ * @param {boolean} wasAtBottomBeforeHeightChange - Whether the list was at bottom before a height change (unused, legacy parameter)
+ * @param {SvelteVirtualListPreviousVisibleRange | null} lastVisibleRange - Previous visible range (unused, legacy parameter)
+ * @param {number} [totalContentHeight] - Pre-calculated total content height; defaults to totalItems * itemHeight
+ * @param {Record<number, number>} [heightCache] - Cache of measured item heights keyed by index, used in topToBottom mode to walk actual heights instead of dividing by average
  * @returns {SvelteVirtualListPreviousVisibleRange} Range of indices to render
  */
 export const calculateVisibleRange = (scrollTop, viewportHeight, itemHeight, totalItems, bufferSize, mode, atBottom, wasAtBottomBeforeHeightChange, lastVisibleRange, totalContentHeight, heightCache) => {
@@ -92,8 +97,25 @@ export const calculateVisibleRange = (scrollTop, viewportHeight, itemHeight, tot
         return { start, end };
     }
     else {
-        const start = Math.floor(scrollTop / itemHeight);
-        const end = Math.min(totalItems, start + Math.ceil(viewportHeight / itemHeight) + 1);
+        // Walk forward through measured heights to find the correct start index
+        // instead of dividing by average height (which is wrong for variable-height items).
+        let start = 0;
+        let acc = 0;
+        while (start < totalItems) {
+            const h = getValidHeight(heightCache?.[start], itemHeight);
+            if (acc + h > scrollTop)
+                break;
+            acc += h;
+            start++;
+        }
+        // Walk forward from start to find end
+        let end = start;
+        let viewAcc = 0;
+        while (end < totalItems && viewAcc < viewportHeight) {
+            viewAcc += getValidHeight(heightCache?.[end], itemHeight);
+            end++;
+        }
+        end = Math.min(totalItems, end + 1); // +1 to ensure partial items are visible
         // Safeguard for topToBottom: ensure last item is fully visible when at max scroll
         const totalHeight = totalContentHeight ?? totalItems * itemHeight;
         const maxScrollTop = Math.max(0, totalHeight - viewportHeight);
@@ -104,11 +126,9 @@ export const calculateVisibleRange = (scrollTop, viewportHeight, itemHeight, tot
             // Pack from the end using measured heights when available: walk backward until viewport filled
             const adjustedEnd = totalItems;
             let startCore = adjustedEnd;
-            let acc = 0;
-            const getH = (i) => getValidHeight(heightCache ? heightCache[i] : undefined, itemHeight);
-            while (startCore > 0 && acc < viewportHeight) {
-                const h = getH(startCore - 1);
-                acc += h;
+            let backAcc = 0;
+            while (startCore > 0 && backAcc < viewportHeight) {
+                backAcc += getValidHeight(heightCache?.[startCore - 1], itemHeight);
                 startCore -= 1;
             }
             return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanspeak/svelte-virtual-list",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "description": "A lightweight, high-performance virtual list component for Svelte 5 that renders large datasets with minimal memory usage. Features include dynamic height support, smooth scrolling, TypeScript support, and efficient DOM recycling. Ideal for infinite scrolling lists, data tables, chat interfaces, and any application requiring the rendering of thousands of items without compromising performance. Zero dependencies and fully customizable.",
   "keywords": [
     "svelte",