ng-virtual-list 19.1.21 → 19.1.23

package/README.md

@@ -1,5 +1,6 @@
 # NgVirtualList
 Maximum performance for extremely large lists.
+10x more resource intensive than standard lists
 
 Angular version 19.X.X.
 
@@ -28,9 +29,9 @@ Template:
 
 <ng-template #hotizontalItemRenderer let-data="data">
   @if (data) {
-  <div class="list__h-container" (click)="onItemClick(data)">
-    <span>{{data.name}}</span>
-  </div>
+    <div class="list__h-container" (click)="onItemClick(data)">
+      <span>{{data.name}}</span>
+    </div>
   }
 </ng-template>
 ```
@@ -68,14 +69,14 @@ Template:
   @if (data) {
     @switch (data.type) {
       @case ("group-header") {
-      <div class="list__h-group-container">
-        <span>{{data.name}}</span>
-      </div>
+        <div class="list__h-group-container">
+          <span>{{data.name}}</span>
+        </div>
       }
       @default {
-      <div class="list__h-container" (click)="onItemClick(data)">
-        <span>{{data.name}}</span>
-      </div>
+        <div class="list__h-container" (click)="onItemClick(data)">
+          <span>{{data.name}}</span>
+        </div>
       }
     }
   }
@@ -124,9 +125,9 @@ Template:
 
 <ng-template #itemRenderer let-data="data">
   @if (data) {
-  <div class="list__container">
-    <p>{{data.name}}</p>
-  </div>
+    <div class="list__container">
+      <p>{{data.name}}</p>
+    </div>
   }
 </ng-template>
 ```
@@ -167,14 +168,14 @@ Template:
   @if (data) {
     @switch (data.type) {
       @case ("group-header") {
-      <div class="list__group-container">
-        <p>{{data.name}}</p>
-      </div>
+        <div class="list__group-container">
+          <p>{{data.name}}</p>
+        </div>
       }
       @default {
-      <div class="list__container">
-        <p>{{data.name}}</p>
-      </div>
+        <div class="list__container">
+          <p>{{data.name}}</p>
+        </div>
       }
     }
   }
@@ -194,14 +195,14 @@ Template (with snapping):
   @if (data) {
     @switch (data.type) {
       @case ("group-header") {
-      <div class="list__group-container">
-        <p>{{data.name}}</p>
-      </div>
+        <div class="list__group-container">
+          <p>{{data.name}}</p>
+        </div>
       }
       @default {
-      <div class="list__container">
-        <p>{{data.name}}</p>
-      </div>
+        <div class="list__container">
+          <p>{{data.name}}</p>
+        </div>
       }
     }
   }

package/fesm2022/ng-virtual-list.mjs

@@ -3,7 +3,7 @@ import { signal, inject, ElementRef, ChangeDetectionStrategy, Component, viewChi
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { BehaviorSubject, tap, filter, map, combineLatest, distinctUntilChanged, switchMap, of } from 'rxjs';
+import { BehaviorSubject, filter, map, tap, combineLatest, distinctUntilChanged, switchMap, of } from 'rxjs';
 
 /**
  * Axis of the arrangement of virtual list elements.
@@ -417,13 +417,13 @@ const MAX_SCROLL_DIRECTION_POOL = 8, CLEAR_SCROLL_DIRECTION_TO = 0;
  */
 class CacheMap extends EventEmitter {
     _map = new Map();
+    _snapshot = new Map();
     _version = 0;
-    _previouseFullSize = 0;
     _delta = 0;
     get delta() {
         return this._delta;
     }
-    _deltaDirection = 1;
+    _deltaDirection = 0;
     set deltaDirection(v) {
         this._deltaDirection = v;
         this._scrollDirection = this.calcScrollDirection(v);
@@ -432,7 +432,7 @@ class CacheMap extends EventEmitter {
         return this._deltaDirection;
     }
     _scrollDirectionCache = [];
-    _scrollDirection = -1;
+    _scrollDirection = 0;
     get scrollDirection() {
         return this._scrollDirection;
     }
@@ -460,13 +460,13 @@ class CacheMap extends EventEmitter {
             const dir = this._scrollDirectionCache[i];
             dict[dir] += 1;
         }
-        if (dict[-1] > dict[1]) {
+        if (dict[-1] > dict[0] && dict[-1] > dict[1]) {
             return -1;
         }
-        else if (dict[1] > dict[-1]) {
+        else if (dict[1] > dict[-1] && dict[1] > dict[0]) {
             return 1;
         }
-        return -1;
+        return 0;
     }
     bumpVersion() {
         this._version = this._version === Number.MAX_SAFE_INTEGER ? 0 : this._version + 1;
@@ -492,8 +492,12 @@ class CacheMap extends EventEmitter {
     forEach(callbackfn, thisArg) {
         return this._map.forEach(callbackfn, thisArg);
     }
+    snapshot() {
+        this._snapshot = new Map(this._map);
+    }
     dispose() {
         super.dispose();
+        this._snapshot.clear();
         this._map.clear();
     }
 }
@@ -505,12 +509,12 @@ class CacheMap extends EventEmitter {
  * @email djonnyx@gmail.com
  */
 const getCollectionRemovedOrUpdatedItems = (previousCollection, currentCollection) => {
-    const result = { deletedOrUpdated: new Array(), added: new Array(), notChanged: new Array() };
+    const result = { deleted: new Array(), updated: new Array(), added: new Array(), notChanged: new Array() };
     if (!currentCollection || currentCollection.length === 0) {
-        return { deletedOrUpdated: (previousCollection ? [...previousCollection] : []), added: [], notChanged: [] };
+        return { deleted: (previousCollection ? [...previousCollection] : []), updated: [], added: [], notChanged: [] };
     }
     if (!previousCollection || previousCollection.length === 0) {
-        return { deletedOrUpdated: [], added: (currentCollection ? [...currentCollection] : []), notChanged: [] };
+        return { deleted: [], updated: [], added: (currentCollection ? [...currentCollection] : []), notChanged: [] };
     }
     const collectionDict = {};
     for (let i = 0, l = currentCollection.length; i < l; i++) {
@@ -519,7 +523,7 @@ const getCollectionRemovedOrUpdatedItems = (previousCollection, currentCollectio
             collectionDict[item.id] = item;
         }
     }
-    const notChangedMap = {}, deletedOrUpdatedMap = {};
+    const notChangedMap = {}, deletedMap = {}, updatedMap = {};
     for (let i = 0, l = previousCollection.length; i < l; i++) {
         const item = previousCollection[i], id = item.id;
         if (item) {
@@ -529,14 +533,19 @@ const getCollectionRemovedOrUpdatedItems = (previousCollection, currentCollectio
                     notChangedMap[item.id] = item;
                     continue;
                 }
+                else {
+                    result.updated.push(item);
+                    updatedMap[item.id] = item;
+                    continue;
+                }
             }
-            result.deletedOrUpdated.push(item);
-            deletedOrUpdatedMap[item.id] = item;
+            result.deleted.push(item);
+            deletedMap[item.id] = item;
         }
     }
     for (let i = 0, l = currentCollection.length; i < l; i++) {
-        const item = currentCollection[i];
-        if (item && !deletedOrUpdatedMap.hasOwnProperty(item.id) && !notChangedMap.hasOwnProperty(item.id)) {
+        const item = currentCollection[i], id = item.id;
+        if (item && !deletedMap.hasOwnProperty(id) && !updatedMap.hasOwnProperty(id) && !notChangedMap.hasOwnProperty(id)) {
             result.added.push(item);
         }
     }
@@ -544,6 +553,13 @@ const getCollectionRemovedOrUpdatedItems = (previousCollection, currentCollectio
 };
 
 const TRACK_BOX_CHANGE_EVENT_NAME = 'change';
+var ItemDisplayMethods;
+(function (ItemDisplayMethods) {
+    ItemDisplayMethods[ItemDisplayMethods["CREATE"] = 0] = "CREATE";
+    ItemDisplayMethods[ItemDisplayMethods["UPDATE"] = 1] = "UPDATE";
+    ItemDisplayMethods[ItemDisplayMethods["DELETE"] = 2] = "DELETE";
+    ItemDisplayMethods[ItemDisplayMethods["NOT_CHANGED"] = 3] = "NOT_CHANGED";
+})(ItemDisplayMethods || (ItemDisplayMethods = {}));
 /**
  * An object that performs tracking, calculations and caching.
  * @link https://github.com/DjonnyX/ng-virtual-list/blob/19.x/projects/ng-virtual-list/src/lib/utils/trackBox.ts
@@ -566,7 +582,6 @@ class TrackBox extends CacheMap {
         }
         this._displayComponents = v;
     }
-    enabledBufferOptimization = false;
     constructor(trackingPropertyName) {
         super();
         this._tracker = new Tracker(trackingPropertyName);
@@ -583,8 +598,6 @@ class TrackBox extends CacheMap {
     _fireChanges = (version) => {
         this.dispatch(TRACK_BOX_CHANGE_EVENT_NAME, version);
     };
-    _isExistAddedItems = false;
-    _addedItemsMap = {};
     _previousCollection;
     _debounceChanges = debounce(this._fireChanges, 0);
     fireChange() {
@@ -593,36 +606,37 @@ class TrackBox extends CacheMap {
     /**
      * Scans the collection for deleted items and flushes the deleted item cache.
      */
-    resetCollection(currentCollection) {
+    resetCollection(currentCollection, itemSize) {
         if (currentCollection !== undefined && currentCollection !== null && currentCollection === this._previousCollection) {
             console.warn('Attention! The collection must be immutable.');
             return;
         }
-        const { deletedOrUpdated, added } = getCollectionRemovedOrUpdatedItems(this._previousCollection, currentCollection);
-        this.clearCache(deletedOrUpdated);
-        this.startScrollDeltaCalculationIfNeed(added);
+        const { deleted, updated, added } = getCollectionRemovedOrUpdatedItems(this._previousCollection, currentCollection);
+        this.clearCache(deleted, updated, added, itemSize);
         this._previousCollection = currentCollection;
     }
-    startScrollDeltaCalculationIfNeed(added) {
-        if (added.length > 0) {
-            this._isExistAddedItems = true;
-        }
-        for (let i = 0, l = added.length; i < l; i++) {
-            const item = added[i];
-            this._addedItemsMap[item.id] = item;
-        }
-    }
     /**
      * Clears the cache of items from the list
      */
-    clearCache(items) {
-        if (!items || items.length === 0) {
-            return;
+    clearCache(deleted, updated, added, itemSize) {
+        if (deleted) {
+            for (let i = 0, l = deleted.length; i < l; i++) {
+                const item = deleted[i], id = item.id;
+                if (this._map.has(id)) {
+                    this._map.delete(id);
+                }
+            }
         }
-        for (let i = 0, l = items.length; i < l; i++) {
-            const item = items[i], id = item.id;
-            if (this._map.has(id)) {
-                this._map.delete(id);
+        if (updated) {
+            for (let i = 0, l = updated.length; i < l; i++) {
+                const item = updated[i], id = item.id;
+                this._map.set(id, { ...(this._map.get(id) || { x: 0, y: 0, width: itemSize, height: itemSize }), method: ItemDisplayMethods.UPDATE });
+            }
+        }
+        if (added) {
+            for (let i = 0, l = added.length; i < l; i++) {
+                const item = added[i], id = item.id;
+                this._map.set(id, { x: 0, y: 0, width: itemSize, height: itemSize, method: ItemDisplayMethods.CREATE });
             }
         }
     }
@@ -644,6 +658,8 @@ class TrackBox extends CacheMap {
             ...opt,
             collection: items,
         });
+        this._delta += metrics.delta;
+        this.snapshot();
         const displayItems = this.generateDisplayCollection(items, stickyMap, metrics);
         return { displayItems, totalSize: metrics.totalSize, delta: metrics.delta };
     }
@@ -704,31 +720,45 @@ class TrackBox extends CacheMap {
      * Calculates list metrics
      */
     recalculateMetrics(options) {
-        const { fromItemId, bounds, collection, dynamicSize, isVertical, itemSize, itemsOffset, scrollSize, snap, stickyMap } = options;
-        const { width, height } = bounds, sizeProperty = isVertical ? HEIGHT_PROP_NAME : WIDTH_PROP_NAME, size = isVertical ? height : width, totalLength = collection.length, typicalItemSize = itemSize, w = isVertical ? width : typicalItemSize, h = isVertical ? typicalItemSize : height, map = this._map, leftItemsOffset = this.enabledBufferOptimization ? this.deltaDirection === 1 ? DEFAULT_ITEMS_OFFSET : itemsOffset : itemsOffset, rightItemsOffset = this.enabledBufferOptimization ? this.deltaDirection === -1 ? DEFAULT_ITEMS_OFFSET : itemsOffset : itemsOffset, checkOverscrollItemsLimit = Math.ceil(size / typicalItemSize), snippedPos = Math.floor(scrollSize), leftItemsWeights = [], isFromId = fromItemId !== undefined && (typeof fromItemId === 'number' && fromItemId > -1)
+        const { fromItemId, bounds, collection, dynamicSize, isVertical, itemSize, itemsOffset, scrollSize, snap, stickyMap, enabledBufferOptimization } = options;
+        const { width, height } = bounds, sizeProperty = isVertical ? HEIGHT_PROP_NAME : WIDTH_PROP_NAME, size = isVertical ? height : width, totalLength = collection.length, typicalItemSize = itemSize, w = isVertical ? width : typicalItemSize, h = isVertical ? typicalItemSize : height, map = this._map, snapshot = this._snapshot, leftItemsOffset = enabledBufferOptimization ? this.deltaDirection === 1 ? DEFAULT_ITEMS_OFFSET : itemsOffset : itemsOffset, rightItemsOffset = enabledBufferOptimization ? this.deltaDirection === -1 ? DEFAULT_ITEMS_OFFSET : itemsOffset : itemsOffset, checkOverscrollItemsLimit = Math.ceil(size / typicalItemSize), snippedPos = Math.floor(scrollSize), leftItemsWeights = [], isFromId = fromItemId !== undefined && (typeof fromItemId === 'number' && fromItemId > -1)
             || (typeof fromItemId === 'string' && fromItemId > '-1');
-        let itemsFromStartToScrollEnd = -1, itemsFromDisplayEndToOffsetEnd = 0, itemsFromStartToDisplayEnd = -1, leftItemLength = 0, rightItemLength = 0, leftItemsWeight = 0, rightItemsWeight = 0, leftHiddenItemsWeight = 0, totalItemsToDisplayEndWeight = 0, sizeOfAddedItems = 0, itemById = undefined, itemByIdPos = 0, targetDisplayItemIndex = -1, isTargetInOverscroll = false, actualScrollSize = itemByIdPos, totalSize = 0, startIndex;
+        let itemsFromStartToScrollEnd = -1, itemsFromDisplayEndToOffsetEnd = 0, itemsFromStartToDisplayEnd = -1, leftItemLength = 0, rightItemLength = 0, leftItemsWeight = 0, rightItemsWeight = 0, leftHiddenItemsWeight = 0, totalItemsToDisplayEndWeight = 0, rightSizeOfAddedItems = 0, leftSizeOfAddedItems = 0, rightSizeOfUpdatedItems = 0, leftSizeOfUpdatedItems = 0, itemById = undefined, itemByIdPos = 0, targetDisplayItemIndex = -1, isTargetInOverscroll = false, actualScrollSize = itemByIdPos, totalSize = 0, startIndex;
         // If the list is dynamic or there are new elements in the collection, then it switches to the long algorithm.
-        if (dynamicSize || this._isExistAddedItems) {
+        if (dynamicSize) {
             let y = 0, stickyCollectionItem = undefined, stickyComponentSize = 0;
             for (let i = 0, l = collection.length; i < l; i++) {
-                const ii = i + 1, collectionItem = collection[i];
-                let componentSize = 0;
-                if (map.has(collectionItem.id)) {
-                    const bounds = map.get(collectionItem.id);
-                    componentSize = bounds ? bounds[sizeProperty] : typicalItemSize;
+                const ii = i + 1, collectionItem = collection[i], id = collectionItem.id;
+                let componentSize = 0, componentSizeDelta = 0, itemDisplayMethod = ItemDisplayMethods.NOT_CHANGED;
+                if (map.has(id)) {
+                    const bounds = map.get(id) || { x: 0, y: 0, width: typicalItemSize, height: typicalItemSize };
+                    componentSize = bounds[sizeProperty];
+                    itemDisplayMethod = bounds?.method ?? ItemDisplayMethods.UPDATE;
+                    if (itemDisplayMethod === ItemDisplayMethods.UPDATE) {
+                        const snapshotBounds = snapshot.get(id);
+                        const componentSnapshotSize = componentSize - (snapshotBounds ? snapshotBounds[sizeProperty] : typicalItemSize);
+                        componentSizeDelta = componentSnapshotSize;
+                        map.set(id, { ...bounds, method: ItemDisplayMethods.NOT_CHANGED });
+                    }
+                    if (itemDisplayMethod === ItemDisplayMethods.CREATE) {
+                        componentSizeDelta = typicalItemSize;
+                        map.set(id, { ...bounds, method: ItemDisplayMethods.NOT_CHANGED });
+                    }
                 }
                 else {
                     componentSize = typicalItemSize;
+                    if (snapshot.has(id)) {
+                        itemDisplayMethod = ItemDisplayMethods.DELETE;
+                    }
                 }
                 totalSize += componentSize;
                 if (isFromId) {
                     if (itemById === undefined) {
-                        if (collectionItem.id !== fromItemId && stickyMap && stickyMap[collectionItem.id] > 0) {
+                        if (id !== fromItemId && stickyMap && stickyMap[id] > 0) {
                             stickyComponentSize = componentSize;
                             stickyCollectionItem = collectionItem;
                         }
-                        if (collectionItem.id === fromItemId) {
+                        if (id === fromItemId) {
                             targetDisplayItemIndex = i;
                             if (stickyCollectionItem && stickyMap && stickyMap[stickyCollectionItem.id] > 0) {
                                 const { num } = this.getElementNumToEnd(i, collection, map, typicalItemSize, size, isVertical);
@@ -763,8 +793,8 @@ class TrackBox extends CacheMap {
                         itemsFromDisplayEndToOffsetEnd = itemsFromStartToDisplayEnd + rightItemsOffset;
                     }
                     if (y > itemByIdPos + size + componentSize) {
-                        if (this._addedItemsMap.hasOwnProperty(collectionItem.id)) {
-                            sizeOfAddedItems += componentSize;
+                        if (itemDisplayMethod === ItemDisplayMethods.UPDATE) {
+                            rightSizeOfAddedItems += componentSizeDelta;
                         }
                     }
                 }
@@ -772,13 +802,24 @@ class TrackBox extends CacheMap {
                     itemsFromStartToDisplayEnd = ii;
                     totalItemsToDisplayEndWeight += componentSize;
                     itemsFromDisplayEndToOffsetEnd = itemsFromStartToDisplayEnd + rightItemsOffset;
+                    if (y < scrollSize - componentSize) {
+                        if (itemDisplayMethod === ItemDisplayMethods.UPDATE) {
+                            leftSizeOfUpdatedItems += componentSizeDelta;
+                        }
+                        if (itemDisplayMethod === ItemDisplayMethods.CREATE) {
+                            leftSizeOfAddedItems += componentSizeDelta;
+                        }
+                    }
                 }
                 else {
                     if (i < itemsFromDisplayEndToOffsetEnd) {
                         rightItemsWeight += componentSize;
                     }
-                    if (this._addedItemsMap.hasOwnProperty(collectionItem.id)) {
-                        sizeOfAddedItems += componentSize;
+                    if (itemDisplayMethod === ItemDisplayMethods.UPDATE) {
+                        rightSizeOfUpdatedItems += componentSizeDelta;
+                    }
+                    if (itemDisplayMethod === ItemDisplayMethods.CREATE) {
+                        rightSizeOfAddedItems += componentSizeDelta;
                     }
                 }
                 y += componentSize;
@@ -820,15 +861,9 @@ class TrackBox extends CacheMap {
             totalSize = totalLength * typicalItemSize;
         }
         startIndex = Math.min(itemsFromStartToScrollEnd - leftItemLength, totalLength > 0 ? totalLength - 1 : 0);
-        const itemsOnDisplay = totalItemsToDisplayEndWeight - leftHiddenItemsWeight, itemsOnDisplayLength = itemsFromStartToDisplayEnd - itemsFromStartToScrollEnd, startPosition = leftHiddenItemsWeight - leftItemsWeight, renderItems = itemsOnDisplayLength + leftItemLength + rightItemLength, delta = totalSize - this._previouseFullSize, scrollDelta = sizeOfAddedItems;
-        if (this.scrollDirection === -1) {
-            if (this._isExistAddedItems && sizeOfAddedItems > 0) {
-                this.stopScrollDeltaCalculation();
-            }
-            this._delta += delta - scrollDelta;
-        }
+        const itemsOnDisplay = totalItemsToDisplayEndWeight - leftHiddenItemsWeight, itemsOnDisplayLength = itemsFromStartToDisplayEnd - itemsFromStartToScrollEnd, startPosition = leftHiddenItemsWeight - leftItemsWeight, renderItems = itemsOnDisplayLength + leftItemLength + rightItemLength, delta = leftSizeOfUpdatedItems + leftSizeOfAddedItems;
         const metrics = {
-            delta: this._delta,
+            delta,
             normalizedItemWidth: w,
             normalizedItemHeight: h,
             width,
@@ -847,7 +882,8 @@ class TrackBox extends CacheMap {
             rightItemLength,
             rightItemsWeight,
             scrollSize: actualScrollSize,
-            sizeOfAddedItems,
+            leftSizeOfAddedItems,
+            rightSizeOfAddedItems,
             sizeProperty,
             snap,
             snippedPos,
@@ -858,7 +894,6 @@ class TrackBox extends CacheMap {
             totalSize,
             typicalItemSize,
         };
-        this._previouseFullSize = totalSize;
         return metrics;
     }
     _scrollDelta = 0;
@@ -868,39 +903,12 @@ class TrackBox extends CacheMap {
     }
     clearDelta(clearDirectionDetector = false) {
         this._delta = 0;
-        this.stopScrollDeltaCalculation();
         if (clearDirectionDetector) {
             this.clearScrollDirectionCache();
         }
     }
-    stopScrollDeltaCalculation() {
-        this._isExistAddedItems = false;
-        this._addedItemsMap = {};
-    }
     generateDisplayCollection(items, stickyMap, metrics) {
-        const { 
-        // delta,
-        normalizedItemWidth, normalizedItemHeight, 
-        // width,
-        // height,
-        dynamicSize, 
-        // itemSize,
-        itemsFromStartToScrollEnd, 
-        // itemsFromStartToDisplayEnd,
-        // itemsOnDisplay,
-        // itemsOnDisplayLength,
-        isVertical, 
-        // leftHiddenItemsWeight,
-        // leftItemLength,
-        // leftItemsWeight,
-        renderItems: renderItemsLength, 
-        // rightItemLength,
-        // rightItemsWeight,
-        scrollSize, sizeProperty, snap, snippedPos, startPosition, 
-        // totalItemsToDisplayEndWeight,
-        totalLength, 
-        // totalSize,
-        startIndex, typicalItemSize, } = metrics, displayItems = [];
+        const { normalizedItemWidth, normalizedItemHeight, dynamicSize, itemsFromStartToScrollEnd, isVertical, renderItems: renderItemsLength, scrollSize, sizeProperty, snap, snippedPos, startPosition, totalLength, startIndex, typicalItemSize, } = metrics, displayItems = [];
         if (items.length) {
             const actualSnippedPosition = snippedPos;
             let pos = startPosition, renderItems = renderItemsLength, stickyItem, nextSticky, stickyItemIndex = -1, stickyItemSize = 0;
@@ -1013,24 +1021,6 @@ class TrackBox extends CacheMap {
             this.set(itemId, bounds);
         }
     }
-    /**
-     * Returns calculated bounds from cache
-     */
-    getBoundsFromCache(items, typicalItemSize, isVertical) {
-        const sizeProperty = isVertical ? HEIGHT_PROP_NAME : WIDTH_PROP_NAME, map = this._map;
-        let size = 0;
-        for (let i = 0, l = items.length; i < l; i++) {
-            const item = items[i];
-            if (map.has(item.id)) {
-                const bounds = map.get(item.id);
-                size += bounds ? bounds[sizeProperty] : typicalItemSize;
-            }
-            else {
-                size += typicalItemSize;
-            }
-        }
-        return size;
-    }
     dispose() {
         super.dispose();
         if (this._debounceChanges) {
@@ -1112,7 +1102,7 @@ class NgVirtualListComponent {
     onScrollEnd = output();
     _itemsOptions = {
         transform: (v) => {
-            this._trackBox.resetCollection(v);
+            this._trackBox.resetCollection(v, this.itemSize());
             return v;
         },
     };
@@ -1176,11 +1166,18 @@ class NgVirtualListComponent {
     _displayComponents = [];
     _bounds = signal(null);
     _scrollSize = signal(0);
+    _isScrollingDebounces = debounce((v) => {
+        this._isScrolling = v;
+    }, 250);
+    _isScrolling = false;
+    get isScrolling() { return this._isScrolling; }
     _resizeObserver = null;
     _onResizeHandler = () => {
         this._bounds.set(this._container()?.nativeElement?.getBoundingClientRect() ?? null);
     };
     _onScrollHandler = (e) => {
+        this._isScrolling = true;
+        this._isScrollingDebounces.dispose();
         this.clearScrollToRepeatExecutionTimeout();
         const container = this._container()?.nativeElement;
         if (container) {
@@ -1207,6 +1204,7 @@ class NgVirtualListComponent {
         container.nativeElement.removeEventListener(SCROLL_END, this._onScrollEndHandler);
         const handler = () => {
             if (container) {
+                this._isScrollingDebounces.execute(false);
                 container.nativeElement.removeEventListener(SCROLL_END, handler);
                 container.nativeElement.scroll(params);
                 if (cb !== undefined) {
@@ -1230,6 +1228,7 @@ class NgVirtualListComponent {
         }
     }
     _onScrollEndHandler = (e) => {
+        this._isScrollingDebounces.execute(false);
         const container = this._container();
         if (container) {
             this._trackBox.clearDelta();
@@ -1287,11 +1286,7 @@ class NgVirtualListComponent {
         this._initialized = signal(false);
         this.$initialized = toObservable(this._initialized);
         this._trackBox.displayComponents = this._displayComponents;
-        const $enabledBufferOptimization = toObservable(this.enabledBufferOptimization);
-        $enabledBufferOptimization.pipe(tap(v => {
-            this._trackBox.enabledBufferOptimization = v;
-        })).subscribe();
-        const $bounds = toObservable(this._bounds).pipe(filter(b => !!b)), $items = toObservable(this.items).pipe(map(i => !i ? [] : i)), $scrollSize = toObservable(this._scrollSize), $itemSize = toObservable(this.itemSize).pipe(map(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $itemsOffset = toObservable(this.itemsOffset).pipe(map(v => v < 0 ? DEFAULT_ITEMS_OFFSET : v)), $stickyMap = toObservable(this.stickyMap).pipe(map(v => !v ? {} : v)), $snap = toObservable(this.snap), $isVertical = toObservable(this.direction).pipe(map(v => this.getIsVertical(v || DEFAULT_DIRECTION))), $dynamicSize = toObservable(this.dynamicSize), $cacheVersion = this.$cacheVersion;
+        const $bounds = toObservable(this._bounds).pipe(filter(b => !!b)), $items = toObservable(this.items).pipe(map(i => !i ? [] : i)), $scrollSize = toObservable(this._scrollSize), $itemSize = toObservable(this.itemSize).pipe(map(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $itemsOffset = toObservable(this.itemsOffset).pipe(map(v => v < 0 ? DEFAULT_ITEMS_OFFSET : v)), $stickyMap = toObservable(this.stickyMap).pipe(map(v => !v ? {} : v)), $snap = toObservable(this.snap), $snapToItem = toObservable(this.snapToItem), $isVertical = toObservable(this.direction).pipe(map(v => this.getIsVertical(v || DEFAULT_DIRECTION))), $dynamicSize = toObservable(this.dynamicSize), $enabledBufferOptimization = toObservable(this.enabledBufferOptimization), $cacheVersion = this.$cacheVersion;
         $isVertical.pipe(takeUntilDestroyed(), tap(v => {
             this._isVertical = v;
             const el = this._elementRef.nativeElement;
@@ -1301,20 +1296,35 @@ class NgVirtualListComponent {
             this.listenCacheChangesIfNeed(dynamicSize);
         })).subscribe();
         combineLatest([this.$initialized, $bounds, $items, $stickyMap, $scrollSize, $itemSize,
-            $itemsOffset, $snap, $isVertical, $dynamicSize, $cacheVersion,
-        ]).pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(([initialized]) => !!initialized), switchMap(([, bounds, items, stickyMap, scrollSize, itemSize, itemsOffset, snap, isVertical, dynamicSize, cacheVersion,]) => {
+            $itemsOffset, $snap, $snapToItem, $isVertical, $dynamicSize, $enabledBufferOptimization, $cacheVersion,
+        ]).pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(([initialized]) => !!initialized), switchMap(([, bounds, items, stickyMap, scrollSize, itemSize, itemsOffset, snap, snapToItem, isVertical, dynamicSize, enabledBufferOptimization, cacheVersion,]) => {
             const { width, height } = bounds;
             let actualScrollSize = scrollSize;
             const opts = {
                 bounds: { width, height }, collection: items, dynamicSize, isVertical, itemSize,
-                itemsOffset, scrollSize: scrollSize, snap,
+                itemsOffset, scrollSize: scrollSize, snap, enabledBufferOptimization,
             };
-            const { displayItems, totalSize } = this._trackBox.updateCollection(items, stickyMap, {
+            const { displayItems, totalSize, delta } = this._trackBox.updateCollection(items, stickyMap, {
                 ...opts, scrollSize: actualScrollSize,
             });
             this.resetBoundsSize(isVertical, totalSize);
             this.createDisplayComponentsIfNeed(displayItems);
             this.tracking();
+            const container = this._container();
+            if (!this.isScrolling && dynamicSize && container) {
+                actualScrollSize = scrollSize + delta;
+                if (snapToItem) {
+                    // etc
+                }
+                else if (scrollSize !== actualScrollSize) {
+                    const params = {
+                        [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: actualScrollSize,
+                        behavior: BEHAVIOR_INSTANT
+                    };
+                    this.scrollImmediately(container, params);
+                    this._trackBox.clearDelta();
+                }
+            }
             return of(displayItems);
         })).subscribe();
         combineLatest([this.$initialized, toObservable(this.itemRenderer)]).pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(([initialized]) => !!initialized), tap(([, itemRenderer]) => {
@@ -1418,7 +1428,7 @@ class NgVirtualListComponent {
                 const { width, height } = this._bounds() || { width: 0, height: 0 }, stickyMap = this.stickyMap(), items = this.items(), isVertical = this._isVertical, opts = {
                     bounds: { width, height }, collection: items, dynamicSize, isVertical: this._isVertical, itemSize,
                     itemsOffset: this.itemsOffset(), scrollSize: isVertical ? container.nativeElement.scrollTop : container.nativeElement.scrollLeft,
-                    snap: this.snap(), fromItemId: id,
+                    snap: this.snap(), fromItemId: id, enabledBufferOptimization: this.enabledBufferOptimization(),
                 }, scrollSize = this._trackBox.getItemPosition(id, stickyMap, opts), params = { [isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollSize, behavior };
                 this._scrollSize.set(scrollSize);
                 if (container) {
@@ -1463,8 +1473,8 @@ class NgVirtualListComponent {
     _onContainerScrollHandler = (e) => {
         const containerEl = this._container();
         if (containerEl) {
-            const scrollSize = (this._isVertical ? containerEl.nativeElement.scrollTop : containerEl.nativeElement.scrollLeft), offsetSize = (this._isVertical ? containerEl.nativeElement.offsetHeight : containerEl.nativeElement.offsetWidth), listSize = (this._isVertical ? this._list()?.nativeElement.offsetHeight ?? 0 : this._list()?.nativeElement.offsetLeft ?? 0);
-            this._trackBox.deltaDirection = this._scrollSize() >= scrollSize || (scrollSize + offsetSize) >= listSize ? -1 : 1;
+            const scrollSize = (this._isVertical ? containerEl.nativeElement.scrollTop : containerEl.nativeElement.scrollLeft);
+            this._trackBox.deltaDirection = this._scrollSize() > scrollSize ? -1 : this._scrollSize() < scrollSize ? 1 : 0;
             const event = new ScrollEvent({
                 direction: this._trackBox.scrollDirection, container: containerEl.nativeElement,
                 list: this._list().nativeElement, delta: this._trackBox.delta,
@@ -1474,9 +1484,10 @@ class NgVirtualListComponent {
         }
     };
     _onContainerScrollEndHandler = (e) => {
-        this._trackBox.deltaDirection = -1;
         const containerEl = this._container();
         if (containerEl) {
+            const scrollSize = (this._isVertical ? containerEl.nativeElement.scrollTop : containerEl.nativeElement.scrollLeft);
+            this._trackBox.deltaDirection = this._scrollSize() > scrollSize ? -1 : 0;
             const event = new ScrollEvent({
                 direction: this._trackBox.scrollDirection, container: containerEl.nativeElement,
                 list: this._list().nativeElement, delta: this._trackBox.delta,
@@ -1503,6 +1514,9 @@ class NgVirtualListComponent {
         if (this._trackBox) {
             this._trackBox.dispose();
         }
+        if (this._isScrollingDebounces) {
+            this._isScrollingDebounces.dispose();
+        }
         const containerEl = this._container();
         if (containerEl) {
             containerEl.nativeElement.removeEventListener(SCROLL, this._onScrollHandler);