ng-virtual-list 16.0.11 → 16.0.13

package/fesm2022/ng-virtual-list.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, EventEmitter as EventEmitter$1, ViewContainerRef, ElementRef, ViewEncapsulation, ViewChild, Output, Input, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { BehaviorSubject, tap, filter, map, combineLatest, distinctUntilChanged, switchMap, of } from 'rxjs';
+import { BehaviorSubject, filter, map, tap, combineLatest, distinctUntilChanged, debounceTime, switchMap, of } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 /**
@@ -28,7 +28,6 @@ const DEFAULT_ITEMS_OFFSET = 2;
 const DEFAULT_LIST_SIZE = 400;
 const DEFAULT_SNAP = false;
 const DEFAULT_ENABLED_BUFFER_OPTIMIZATION = true;
-const DEFAULT_OPTIMIZE_FOR_END = false;
 const DEFAULT_SNAP_TO_ITEM = false;
 const DEFAULT_DYNAMIC_SIZE = false;
 const TRACK_BY_PROPERTY_NAME = 'id';
@@ -424,13 +423,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);
@@ -438,19 +437,8 @@ class CacheMap extends EventEmitter {
     get deltaDirection() {
         return this._deltaDirection;
     }
-    _likeAChat = false;
-    set likeAChat(v) {
-        if (this._likeAChat === v) {
-            return;
-        }
-        if (v) {
-            this._scrollDirection = -1;
-        }
-        this._scrollDirectionCache = [];
-        this._likeAChat = v;
-    }
     _scrollDirectionCache = [];
-    _scrollDirection = 1;
+    _scrollDirection = 0;
     get scrollDirection() {
         return this._scrollDirection;
     }
@@ -478,13 +466,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;
@@ -510,8 +498,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();
     }
 }
@@ -523,12 +515,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++) {
@@ -537,7 +529,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) {
@@ -547,14 +539,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);
         }
     }
@@ -562,6 +559,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/16.x/projects/ng-virtual-list/src/lib/utils/trackBox.ts
@@ -584,7 +588,6 @@ class TrackBox extends CacheMap {
         }
         this._displayComponents = v;
     }
-    enabledBufferOptimization = false;
     constructor(trackingPropertyName) {
         super();
         this._tracker = new Tracker(trackingPropertyName);
@@ -601,8 +604,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() {
@@ -611,36 +612,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 });
             }
         }
     }
@@ -662,6 +664,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 };
     }
@@ -722,31 +726,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);
@@ -781,8 +799,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;
                         }
                     }
                 }
@@ -790,13 +808,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;
@@ -838,15 +867,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,
@@ -865,7 +888,8 @@ class TrackBox extends CacheMap {
             rightItemLength,
             rightItemsWeight,
             scrollSize: actualScrollSize,
-            sizeOfAddedItems,
+            leftSizeOfAddedItems,
+            rightSizeOfAddedItems,
             sizeProperty,
             snap,
             snippedPos,
@@ -876,7 +900,6 @@ class TrackBox extends CacheMap {
             totalSize,
             typicalItemSize,
         };
-        this._previouseFullSize = totalSize;
         return metrics;
     }
     _scrollDelta = 0;
@@ -886,39 +909,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;
@@ -1031,24 +1027,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) {
@@ -1133,7 +1111,7 @@ class NgVirtualListComponent {
     _$items = new BehaviorSubject(undefined);
     $items = this._$items.asObservable();
     _itemsTransform = (v) => {
-        this._trackBox.resetCollection(v);
+        this._trackBox.resetCollection(v, this._$itemSize.getValue());
         return v;
     };
     /**
@@ -1193,20 +1171,6 @@ class NgVirtualListComponent {
     }
     ;
     get enabledBufferOptimization() { return this._$enabledBufferOptimization.getValue(); }
-    _$likeAChat = new BehaviorSubject(DEFAULT_OPTIMIZE_FOR_END);
-    $likeAChat = this._$likeAChat.asObservable();
-    /**
-     * If true, optimization for lists that start from the end is enabled (chat mode enabled).
-     */
-    set likeAChat(v) {
-        if (this._$likeAChat.getValue() === v) {
-            return;
-        }
-        this._$likeAChat.next(v);
-        this._cdr.markForCheck();
-    }
-    ;
-    get likeAChat() { return this._$likeAChat.getValue(); }
     _$itemRenderer = new BehaviorSubject(undefined);
     $itemRenderer = this._$itemRenderer.asObservable();
     /**
@@ -1304,11 +1268,17 @@ class NgVirtualListComponent {
     _displayComponents = [];
     _$bounds = new BehaviorSubject(null);
     _$scrollSize = new BehaviorSubject(0);
+    _isScrollingDebounces = debounce((v) => {
+        this._isScrolling = v;
+    }, 250);
+    _isScrolling = false;
+    get isScrolling() { return this._isScrolling; }
     _resizeObserver = null;
     _onResizeHandler = () => {
         this._$bounds.next(this._container?.nativeElement?.getBoundingClientRect() ?? null);
     };
     _onScrollHandler = (e) => {
+        this._isScrollingDebounces.dispose();
         this.clearScrollToRepeatExecutionTimeout();
         const container = this._container?.nativeElement;
         if (container) {
@@ -1416,15 +1386,7 @@ class NgVirtualListComponent {
         this._$initialized = new BehaviorSubject(false);
         this.$initialized = this._$initialized.asObservable();
         this._trackBox.displayComponents = this._displayComponents;
-        const $enabledBufferOptimization = this.$enabledBufferOptimization;
-        $enabledBufferOptimization.pipe(takeUntilDestroyed(), tap(v => {
-            this._trackBox.enabledBufferOptimization = v;
-        })).subscribe();
-        const $likeAChat = this.$likeAChat;
-        $likeAChat.pipe(takeUntilDestroyed(), tap(v => {
-            this._trackBox.likeAChat = v;
-        })).subscribe();
-        const $bounds = this._$bounds.asObservable().pipe(filter(b => !!b)), $items = this.$items.pipe(map(i => !i ? [] : i)), $scrollSize = this._$scrollSize.asObservable(), $itemSize = this.$itemSize.pipe(map(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $itemsOffset = this.$itemsOffset.pipe(map(v => v < 0 ? DEFAULT_ITEMS_OFFSET : v)), $stickyMap = this.$stickyMap.pipe(map(v => !v ? {} : v)), $snap = this.$snap, $isVertical = this.$direction.pipe(map(v => this.getIsVertical(v || DEFAULT_DIRECTION))), $dynamicSize = this.$dynamicSize, $cacheVersion = this.$cacheVersion;
+        const $bounds = this._$bounds.asObservable().pipe(filter(b => !!b)), $items = this.$items.pipe(map(i => !i ? [] : i)), $scrollSize = this._$scrollSize.asObservable(), $itemSize = this.$itemSize.pipe(map(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $itemsOffset = this.$itemsOffset.pipe(map(v => v < 0 ? DEFAULT_ITEMS_OFFSET : v)), $stickyMap = this.$stickyMap.pipe(map(v => !v ? {} : v)), $snap = this.$snap, $snapToItem = this.$snapToItem, $isVertical = this.$direction.pipe(map(v => this.getIsVertical(v || DEFAULT_DIRECTION))), $dynamicSize = this.$dynamicSize, $enabledBufferOptimization = this.$enabledBufferOptimization, $cacheVersion = this.$cacheVersion;
         $isVertical.pipe(takeUntilDestroyed(), tap(v => {
             this._isVertical = v;
             const el = this._elementRef.nativeElement;
@@ -1434,20 +1396,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(), debounceTime(0), 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, this.$itemRenderer]).pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(([initialized]) => !!initialized), tap(([, itemRenderer]) => {
@@ -1536,6 +1513,7 @@ class NgVirtualListComponent {
         clearTimeout(this._scrollToRepeatExecutionTimeout);
     }
     scrollToExecutor(id, behavior, iteration = 0) {
+        this._isScrolling = true;
         this.clearScrollToRepeatExecutionTimeout();
         const items = this.items;
         if (!items || !items.length) {
@@ -1551,7 +1529,7 @@ class NgVirtualListComponent {
                 const { width, height } = this._$bounds.getValue() || { 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.next(scrollSize);
                 if (container) {
@@ -1594,10 +1572,11 @@ class NgVirtualListComponent {
         this.scrollTo(latItem.id, behavior);
     }
     _onContainerScrollHandler = (e) => {
+        this._isScrolling = true;
         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.getValue() >= scrollSize ? -1 : this.likeAChat && (scrollSize + offsetSize) >= listSize ? -1 : 1;
+            const scrollSize = (this._isVertical ? containerEl.nativeElement.scrollTop : containerEl.nativeElement.scrollLeft);
+            this._trackBox.deltaDirection = this._$scrollSize.getValue() > scrollSize ? -1 : this._$scrollSize.getValue() < scrollSize ? 1 : 0;
             const event = new ScrollEvent({
                 direction: this._trackBox.scrollDirection, container: containerEl.nativeElement,
                 list: this._list.nativeElement, delta: this._trackBox.delta,
@@ -1607,9 +1586,11 @@ class NgVirtualListComponent {
         }
     };
     _onContainerScrollEndHandler = (e) => {
-        this._trackBox.deltaDirection = this.likeAChat ? -1 : 1;
+        this._isScrollingDebounces.execute(false);
         const containerEl = this._container;
         if (containerEl) {
+            const scrollSize = (this._isVertical ? containerEl.nativeElement.scrollTop : containerEl.nativeElement.scrollLeft);
+            this._trackBox.deltaDirection = this._$scrollSize.getValue() > scrollSize ? -1 : 0;
             const event = new ScrollEvent({
                 direction: this._trackBox.scrollDirection, container: containerEl.nativeElement,
                 list: this._list.nativeElement, delta: this._trackBox.delta,
@@ -1636,6 +1617,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);
@@ -1654,7 +1638,7 @@ class NgVirtualListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgVirtualListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgVirtualListComponent, selector: "ng-virtual-list", inputs: { items: "items", snap: "snap", snapToItem: "snapToItem", enabledBufferOptimization: "enabledBufferOptimization", likeAChat: "likeAChat", itemRenderer: "itemRenderer", stickyMap: "stickyMap", itemSize: "itemSize", dynamicSize: "dynamicSize", direction: "direction", itemsOffset: "itemsOffset" }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd" }, viewQueries: [{ propertyName: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_container", first: true, predicate: ["container"], descendants: true, read: (ElementRef) }, { propertyName: "_list", first: true, predicate: ["list"], descendants: true, read: (ElementRef) }], ngImport: i0, template: "<div #container part=\"scroller\" class=\"ngvl__container\">\r\n  <ul #list part=\"list\" class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </ul>\r\n</div>", styles: [":host{display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.vertical){height:320px}.ngvl__container{overflow:auto;width:100%;height:100%}.ngvl__list{position:relative;list-style:none;padding:0;margin:0;width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgVirtualListComponent, selector: "ng-virtual-list", inputs: { items: "items", snap: "snap", snapToItem: "snapToItem", enabledBufferOptimization: "enabledBufferOptimization", itemRenderer: "itemRenderer", stickyMap: "stickyMap", itemSize: "itemSize", dynamicSize: "dynamicSize", direction: "direction", itemsOffset: "itemsOffset" }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd" }, viewQueries: [{ propertyName: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_container", first: true, predicate: ["container"], descendants: true, read: (ElementRef) }, { propertyName: "_list", first: true, predicate: ["list"], descendants: true, read: (ElementRef) }], ngImport: i0, template: "<div #container part=\"scroller\" class=\"ngvl__container\">\r\n  <ul #list part=\"list\" class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </ul>\r\n</div>", styles: [":host{display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.vertical){height:320px}.ngvl__container{overflow:auto;width:100%;height:100%}.ngvl__list{position:relative;list-style:none;padding:0;margin:0;width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgVirtualListComponent, decorators: [{
             type: Component,
@@ -1680,8 +1664,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], enabledBufferOptimization: [{
                 type: Input
-            }], likeAChat: [{
-                type: Input
             }], itemRenderer: [{
                 type: Input
             }], stickyMap: [{