ng-virtual-list 20.0.22 → 20.0.24

package/README.md

@@ -449,10 +449,9 @@ Inputs
 | itemRenderer | TemplateRef | Rendering element template. |
 | stickyMap | [IVirtualListStickyMap?](https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/models/sticky-map.model.ts) | Dictionary zIndex by id of the list element. If the value is not set or equal to 0, then a simple element is displayed, if the value is greater than 0, then the sticky position mode is enabled for the element. |
 | snap | boolean? = false | Determines whether elements will snap. Default value is "false". |
-| snapToItem | boolean? = false | Determines whether scroll positions will be snapped to the element. Default value is "false". |
 | direction | [Direction? = 'vertical'](https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/enums/direction.ts) | Determines the direction in which elements are placed. Default value is "vertical". |
 | dynamicSize | boolean? = false | If true then the items in the list can have different sizes and the itemSize property is ignored. If false then the items in the list have a fixed size specified by the itemSize property. The default value is false. |
-| enabledBufferOptimization | boolean? = true | Enables buffer optimization. Can only be used if items in the collection are not added or updated. |
+| enabledBufferOptimization | boolean? = true | Experimental! Enables buffer optimization. Can only be used if items in the collection are not added or updated. |
 | trackBy | string? = 'id' | The name of the property by which tracking is performed. |
 
 <br/>
@@ -478,12 +477,12 @@ Methods
 
 | Angular version | ng-virtual-list version | git | npm |
 |--|--|--|--|
-| 19.x | 19.1.25 | [19.x](https://github.com/DjonnyX/ng-virtual-list/tree/19.x) | [19.1.25](https://www.npmjs.com/package/ng-virtual-list/v/19.1.25) |
-| 18.x | 18.0.14 | [18.x](https://github.com/DjonnyX/ng-virtual-list/tree/18.x) | [18.0.14](https://www.npmjs.com/package/ng-virtual-list/v/18.0.14) |
-| 17.x | 17.0.11 | [17.x](https://github.com/DjonnyX/ng-virtual-list/tree/17.x) | [17.0.11](https://www.npmjs.com/package/ng-virtual-list/v/17.0.11) |
-| 16.x | 16.0.14 | [16.x](https://github.com/DjonnyX/ng-virtual-list/tree/16.x) | [16.0.14](https://www.npmjs.com/package/ng-virtual-list/v/16.0.14) |
-| 15.x | 15.0.12 | [15.x](https://github.com/DjonnyX/ng-virtual-list/tree/15.x) | [15.0.12](https://www.npmjs.com/package/ng-virtual-list/v/15.0.12) |
-| 14.x | 14.0.12 | [14.x](https://github.com/DjonnyX/ng-virtual-list/tree/14.x) | [14.0.12](https://www.npmjs.com/package/ng-virtual-list/v/14.0.12) |
+| 19.x | 19.1.28 | [19.x](https://github.com/DjonnyX/ng-virtual-list/tree/19.x) | [19.1.28](https://www.npmjs.com/package/ng-virtual-list/v/19.1.28) |
+| 18.x | 18.0.16 | [18.x](https://github.com/DjonnyX/ng-virtual-list/tree/18.x) | [18.0.16](https://www.npmjs.com/package/ng-virtual-list/v/18.0.16) |
+| 17.x | 17.0.13 | [17.x](https://github.com/DjonnyX/ng-virtual-list/tree/17.x) | [17.0.13](https://www.npmjs.com/package/ng-virtual-list/v/17.0.13) |
+| 16.x | 16.0.16 | [16.x](https://github.com/DjonnyX/ng-virtual-list/tree/16.x) | [16.0.16](https://www.npmjs.com/package/ng-virtual-list/v/16.0.16) |
+| 15.x | 15.0.14 | [15.x](https://github.com/DjonnyX/ng-virtual-list/tree/15.x) | [15.0.14](https://www.npmjs.com/package/ng-virtual-list/v/15.0.14) |
+| 14.x | 14.0.14 | [14.x](https://github.com/DjonnyX/ng-virtual-list/tree/14.x) | [14.0.14](https://www.npmjs.com/package/ng-virtual-list/v/14.0.14) |
 
 <br/>
 

package/fesm2022/ng-virtual-list.mjs

@@ -27,8 +27,7 @@ const DEFAULT_ITEM_SIZE = 24;
 const DEFAULT_ITEMS_OFFSET = 2;
 const DEFAULT_LIST_SIZE = 400;
 const DEFAULT_SNAP = false;
-const DEFAULT_ENABLED_BUFFER_OPTIMIZATION = true;
-const DEFAULT_SNAP_TO_ITEM = false;
+const DEFAULT_ENABLED_BUFFER_OPTIMIZATION = false;
 const DEFAULT_DYNAMIC_SIZE = false;
 const TRACK_BY_PROPERTY_NAME = 'id';
 const DEFAULT_DIRECTION = Directions.VERTICAL;
@@ -115,7 +114,7 @@ class NgVirtualListItemComponent {
         const el = this._elementRef.nativeElement, { width, height, left, top } = el.getBoundingClientRect();
         return { width, height, x: left, y: top };
     }
-    showIfNeed() {
+    show() {
         const styles = this._elementRef.nativeElement.style;
         if (styles.visibility === VISIBILITY_VISIBLE) {
             return;
@@ -236,29 +235,24 @@ class Tracker {
     /**
      * tracking by propName
      */
-    track(items, components, afterComponentSetup) {
+    track(items, components, direction) {
         if (!items) {
             return;
         }
-        const idPropName = this._trackingPropertyName, untrackedItems = [...components];
-        for (let i = 0, l = items.length; i < l; i++) {
+        const idPropName = this._trackingPropertyName, untrackedItems = [...components], isDown = direction === 0 || direction === 1;
+        for (let i = isDown ? 0 : items.length - 1, l = isDown ? items.length : 0; isDown ? i < l : i >= l; isDown ? i++ : i--) {
             const item = items[i], itemTrackingProperty = item[idPropName];
             if (this._trackMap) {
-                const diId = this._trackMap[itemTrackingProperty];
                 if (this._trackMap.hasOwnProperty(itemTrackingProperty)) {
-                    const lastIndex = this._displayObjectIndexMapById[diId], el = components[lastIndex];
-                    const elId = el?.instance?.id;
-                    if (el && elId === diId) {
+                    const diId = this._trackMap[itemTrackingProperty], compIndex = this._displayObjectIndexMapById[diId], comp = components[compIndex];
+                    const compId = comp?.instance?.id;
+                    if (comp !== undefined && compId == diId) {
                         const indexByUntrackedItems = untrackedItems.findIndex(v => {
-                            return v.instance.id === elId;
+                            return v.instance.id == compId;
                         });
                         if (indexByUntrackedItems > -1) {
-                            if (el.instance.item !== item) {
-                                el.instance.item = item;
-                                if (afterComponentSetup !== undefined) {
-                                    afterComponentSetup(el.instance, item);
-                                }
-                            }
+                            comp.instance.item = item;
+                            comp.instance.show();
                             untrackedItems.splice(indexByUntrackedItems, 1);
                             continue;
                         }
@@ -269,20 +263,18 @@ class Tracker {
             if (untrackedItems.length > 0) {
                 const el = untrackedItems.shift(), item = items[i];
                 if (el) {
-                    if (el.instance.item !== item) {
-                        el.instance.item = item;
-                        if (this._trackMap) {
-                            this._trackMap[itemTrackingProperty] = el.instance.id;
-                        }
-                        if (afterComponentSetup !== undefined) {
-                            afterComponentSetup(el.instance, item);
-                        }
+                    el.instance.item = item;
+                    if (this._trackMap) {
+                        this._trackMap[itemTrackingProperty] = el.instance.id;
                     }
                 }
             }
         }
         if (untrackedItems.length) {
-            throw Error('Tracking by id caused an error.');
+            for (let i = 0, l = untrackedItems.length; i < l; i++) {
+                const comp = untrackedItems[i];
+                comp.instance.hide();
+            }
         }
     }
     untrackComponentByIdProperty(component) {
@@ -404,7 +396,7 @@ class EventEmitter {
     }
 }
 
-const MAX_SCROLL_DIRECTION_POOL = 8, CLEAR_SCROLL_DIRECTION_TO = 0;
+const MAX_SCROLL_DIRECTION_POOL = 50, CLEAR_SCROLL_DIRECTION_TO = 10;
 /**
  * Cache map.
  * Emits a change event on each mutation.
@@ -452,15 +444,23 @@ class CacheMap extends EventEmitter {
             this._scrollDirectionCache.shift();
         }
         this._scrollDirectionCache.push(v);
-        const dict = { [-1]: 0, [0]: 0, [1]: 0 };
-        for (let i = 0, l = this._scrollDirectionCache.length; i < l; i++) {
-            const dir = this._scrollDirectionCache[i];
+        const dict = { ['-1']: 0, ['0']: 0, ['1']: 0 };
+        for (let i = 0, l = this._scrollDirectionCache.length, li = l - 1; i < l; i++) {
+            const dir = String(this._scrollDirectionCache[i]);
             dict[dir] += 1;
+            if (i === li) {
+                for (let d in dict) {
+                    if (d === String(v)) {
+                        continue;
+                    }
+                    dict[d] -= 1;
+                }
+            }
         }
-        if (dict[-1] > dict[0] && dict[-1] > dict[1]) {
+        if (dict['-1'] > dict['0'] && dict['-1'] > dict['1']) {
             return -1;
         }
-        else if (dict[1] > dict[-1] && dict[1] > dict[0]) {
+        else if (dict['1'] > dict['-1'] && dict['1'] > dict['0']) {
             return 1;
         }
         return 0;
@@ -719,12 +719,34 @@ class TrackBox extends CacheMap {
      */
     recalculateMetrics(options) {
         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)
+        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, checkOverscrollItemsLimit = Math.ceil(size / typicalItemSize), snippedPos = Math.floor(scrollSize), leftItemsWeights = [], isFromId = fromItemId !== undefined && (typeof fromItemId === 'number' && fromItemId > -1)
             || (typeof fromItemId === 'string' && fromItemId > '-1');
+        let leftItemsOffset = 0, rightItemsOffset = 0;
+        if (enabledBufferOptimization) {
+            switch (this.scrollDirection) {
+                case 1: {
+                    leftItemsOffset = 0;
+                    rightItemsOffset = itemsOffset;
+                    break;
+                }
+                case -1: {
+                    leftItemsOffset = itemsOffset;
+                    rightItemsOffset = 0;
+                    break;
+                }
+                case 0:
+                default: {
+                    leftItemsOffset = rightItemsOffset = itemsOffset;
+                }
+            }
+        }
+        else {
+            leftItemsOffset = rightItemsOffset = itemsOffset;
+        }
         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) {
-            let y = 0, stickyCollectionItem = undefined, stickyComponentSize = 0;
+            let y = 0, stickyCollectionItem = undefined, stickyComponentSize = 0, stickyComponentIndex = -1;
             for (let i = 0, l = collection.length; i < l; i++) {
                 const ii = i + 1, collectionItem = collection[i], id = collectionItem.id;
                 let componentSize = 0, componentSizeDelta = 0, itemDisplayMethod = ItemDisplayMethods.NOT_CHANGED;
@@ -755,18 +777,26 @@ class TrackBox extends CacheMap {
                         if (id !== fromItemId && stickyMap && stickyMap[id] > 0) {
                             stickyComponentSize = componentSize;
                             stickyCollectionItem = collectionItem;
+                            stickyComponentIndex = i;
                         }
                         if (id === fromItemId) {
                             targetDisplayItemIndex = i;
-                            if (stickyCollectionItem && stickyMap && stickyMap[stickyCollectionItem.id] > 0) {
+                            if (stickyCollectionItem && stickyMap) {
                                 const { num } = this.getElementNumToEnd(i, collection, map, typicalItemSize, size, isVertical);
                                 if (num > 0) {
                                     isTargetInOverscroll = true;
                                     y -= size - componentSize;
                                 }
                                 else {
-                                    y -= stickyComponentSize;
-                                    leftHiddenItemsWeight -= stickyComponentSize;
+                                    if (stickyMap && !stickyMap[collectionItem.id] && y >= scrollSize && y < scrollSize + stickyComponentSize) {
+                                        const snappedY = scrollSize - stickyComponentSize;
+                                        leftHiddenItemsWeight -= (snappedY - y);
+                                        y = snappedY;
+                                    }
+                                    else {
+                                        y -= stickyComponentSize;
+                                        leftHiddenItemsWeight -= stickyComponentSize;
+                                    }
                                 }
                             }
                             itemById = collectionItem;
@@ -996,7 +1026,7 @@ class TrackBox extends CacheMap {
         if (!this._items || !this._displayComponents) {
             return;
         }
-        this._tracker.track(this._items, this._displayComponents);
+        this._tracker.track(this._items, this._displayComponents, this.scrollDirection);
     }
     setDisplayObjectIndexMapById(v) {
         this._tracker.displayObjectIndexMapById = v;
@@ -1119,10 +1149,7 @@ class NgVirtualListComponent {
      */
     snap = input(DEFAULT_SNAP);
     /**
-     * Determines whether scroll positions will be snapped to the element. Default value is "false".
-     */
-    snapToItem = input(DEFAULT_SNAP_TO_ITEM);
-    /**
+     * Experimental!
      * Enables buffer optimization.
      * Can only be used if items in the collection are not added or updated. Otherwise, artifacts in the form of twitching of the scroll area are possible.
      * Works only if the property dynamic = true
@@ -1168,100 +1195,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._isScrollingDebounces.dispose();
         this.clearScrollToRepeatExecutionTimeout();
         const container = this._container()?.nativeElement;
         if (container) {
             const dynamicSize = this.dynamicSize(), delta = this._trackBox.delta, scrollSize = (this._isVertical ? container.scrollTop : container.scrollLeft);
-            let actualScrollSize = scrollSize, isImmediateScroll = false;
+            let actualScrollSize = scrollSize, isScrollIUmmediate = false;
             if (dynamicSize && delta !== 0) {
                 actualScrollSize = scrollSize + delta;
-                const params = {
-                    [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: actualScrollSize,
-                    behavior: BEHAVIOR_INSTANT
-                };
-                const container = this._container();
-                if (container) {
-                    isImmediateScroll = true;
-                    this.scrollImmediately(container, params);
-                    this._trackBox.clearDelta();
-                }
-            }
-            this._scrollSize.set(actualScrollSize);
-        }
-    };
-    scrollImmediately(container, params, cb) {
-        this.clearScrollImmediately();
-        container.nativeElement.removeEventListener(SCROLL_END, this._onScrollEndHandler);
-        const handler = () => {
-            if (container) {
-                container.nativeElement.removeEventListener(SCROLL_END, handler);
-                container.nativeElement.scroll(params);
-                if (cb !== undefined) {
-                    cb();
-                }
-                container.nativeElement.addEventListener(SCROLL_END, this._onScrollEndHandler);
-            }
-        };
-        container.nativeElement.addEventListener(SCROLL_END, handler);
-        container.nativeElement.scroll(params);
-        this._scrollImmediatelyHandler = handler;
-    }
-    _scrollImmediatelyHandler = undefined;
-    clearScrollImmediately() {
-        if (this._scrollImmediatelyHandler === undefined) {
-            return;
-        }
-        const container = this._container();
-        if (container) {
-            container.nativeElement.removeEventListener(SCROLL_END, this._scrollImmediatelyHandler);
-        }
-    }
-    _onScrollEndHandler = (e) => {
-        const container = this._container();
-        if (container) {
-            this._trackBox.clearDelta();
-            this._trackBox.clearDeltaDirection();
-            const itemSize = this.itemSize(), snapToItem = this.snapToItem(), dynamicSize = this.dynamicSize(), delta = this._trackBox.delta, scrollSize = (this._isVertical ? container.nativeElement.scrollTop : container.nativeElement.scrollLeft);
-            let actualScrollSize = scrollSize;
-            if (dynamicSize) {
-                actualScrollSize = scrollSize + delta;
-                if (snapToItem) {
-                    const items = this.items(), isVertical = this._isVertical, targetItem = this._trackBox.getNearestItem(actualScrollSize, items, itemSize, isVertical);
-                    if (targetItem) {
-                        this.scrollTo(targetItem.id, BEHAVIOR_INSTANT);
-                    }
-                }
-                else if (scrollSize !== actualScrollSize) {
-                    const params = {
-                        [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: actualScrollSize,
-                        behavior: BEHAVIOR_INSTANT
-                    };
-                    this._scrollSize.set(actualScrollSize);
-                    container.nativeElement.scroll(params);
-                    return;
-                }
-            }
-            else {
-                const scrollItems = Math.round(scrollSize / itemSize);
-                actualScrollSize = snapToItem ? scrollItems * itemSize : scrollSize;
-                if (scrollSize !== actualScrollSize) {
-                    const params = {
-                        [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: actualScrollSize,
-                        behavior: BEHAVIOR_INSTANT
-                    };
-                    container.nativeElement.scroll(params);
-                }
             }
             this._scrollSize.set(actualScrollSize);
         }
@@ -1293,7 +1238,7 @@ class NgVirtualListComponent {
         $trackBy.pipe(takeUntilDestroyed(), tap(v => {
             this._trackBox.trackingPropertyName = 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), $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;
+        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), $enabledBufferOptimization = toObservable(this.enabledBufferOptimization), $cacheVersion = this.$cacheVersion;
         $isVertical.pipe(takeUntilDestroyed(), tap(v => {
             this._isVertical = v;
             const el = this._elementRef.nativeElement;
@@ -1303,36 +1248,44 @@ class NgVirtualListComponent {
             this.listenCacheChangesIfNeed(dynamicSize);
         })).subscribe();
         combineLatest([this.$initialized, $bounds, $items, $stickyMap, $scrollSize, $itemSize,
-            $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,]) => {
+            $itemsOffset, $snap, $isVertical, $dynamicSize, $enabledBufferOptimization, $cacheVersion,
+        ]).pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(([initialized]) => !!initialized), switchMap(([, bounds, items, stickyMap, scrollSize, itemSize, itemsOffset, snap, isVertical, dynamicSize, enabledBufferOptimization, cacheVersion,]) => {
             const { width, height } = bounds;
-            let actualScrollSize = scrollSize;
+            let actualScrollSize = (this._isVertical ? this._container()?.nativeElement.scrollTop ?? 0 : this._container()?.nativeElement.scrollLeft) ?? 0;
             const opts = {
                 bounds: { width, height }, collection: items, dynamicSize, isVertical, itemSize,
                 itemsOffset, scrollSize: scrollSize, snap, enabledBufferOptimization,
             };
-            const { displayItems, totalSize, delta } = this._trackBox.updateCollection(items, stickyMap, {
+            const { displayItems, totalSize } = 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) {
-                    const items = this.items(), isVertical = this._isVertical, targetItem = this._trackBox.getNearestItem(actualScrollSize, items, itemSize, isVertical);
-                    if (targetItem) {
-                        this.scrollTo(targetItem.id, BEHAVIOR_INSTANT);
+            if (container) {
+                actualScrollSize = actualScrollSize + this._trackBox.delta;
+                this._trackBox.clearDelta();
+                if (dynamicSize) {
+                    if (scrollSize !== actualScrollSize) {
+                        const params = {
+                            [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: actualScrollSize,
+                            behavior: BEHAVIOR_INSTANT
+                        };
+                        container.nativeElement.scrollTo(params);
                     }
                 }
-                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();
+                else {
+                    if (scrollSize !== actualScrollSize) {
+                        const params = {
+                            [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: actualScrollSize,
+                            behavior: BEHAVIOR_INSTANT
+                        };
+                        const container = this._container();
+                        if (container) {
+                            container.nativeElement.scrollTo(params);
+                        }
+                    }
                 }
             }
             return of(displayItems);
@@ -1370,25 +1323,14 @@ class NgVirtualListComponent {
         }
         this._trackBox.items = displayItems;
         const _listContainerRef = this._listContainerRef;
-        while (this._displayComponents.length < displayItems.length) {
+        const maxLength = displayItems.length, components = this._displayComponents;
+        while (components.length < maxLength) {
             if (_listContainerRef) {
                 const comp = _listContainerRef.createComponent(NgVirtualListItemComponent);
-                this._displayComponents.push(comp);
+                components.push(comp);
                 this._componentsResizeObserver.observe(comp.instance.element);
             }
         }
-        const maxLength = displayItems.length;
-        while (this._displayComponents.length > maxLength) {
-            const comp = this._displayComponents.pop();
-            if (comp) {
-                this._componentsResizeObserver.unobserve(comp.instance.element);
-                comp?.destroy();
-                const id = comp?.instance.item?.id;
-                if (id !== undefined) {
-                    this._trackBox.untrackComponentByIdProperty(comp?.instance);
-                }
-            }
-        }
         this.resetRenderers();
     }
     resetRenderers(itemRenderer) {
@@ -1429,58 +1371,56 @@ class NgVirtualListComponent {
     clearScrollToRepeatExecutionTimeout() {
         clearTimeout(this._scrollToRepeatExecutionTimeout);
     }
-    scrollToExecutor(id, behavior, iteration = 0) {
-        this._isScrolling = true;
-        this.clearScrollToRepeatExecutionTimeout();
+    scrollToExecutor(id, behavior, iteration = 0, isLastIteration = false) {
         const items = this.items();
         if (!items || !items.length) {
             return;
         }
         const dynamicSize = this.dynamicSize(), container = this._container(), itemSize = this.itemSize();
         if (container) {
+            this.clearScrollToRepeatExecutionTimeout();
             if (dynamicSize) {
                 if (container) {
                     container.nativeElement.removeEventListener(SCROLL, this._onScrollHandler);
-                    container.nativeElement.removeEventListener(SCROLL_END, this._onScrollEndHandler);
                 }
-                const { width, height } = this._bounds() || { width: 0, height: 0 }, stickyMap = this.stickyMap(), items = this.items(), isVertical = this._isVertical, opts = {
+                const { width, height } = this._bounds() || { width: 0, height: 0 }, stickyMap = this.stickyMap(), items = this.items(), isVertical = this._isVertical, delta = this._trackBox.delta, opts = {
                     bounds: { width, height }, collection: items, dynamicSize, isVertical: this._isVertical, itemSize,
-                    itemsOffset: this.itemsOffset(), scrollSize: isVertical ? container.nativeElement.scrollTop : container.nativeElement.scrollLeft,
+                    itemsOffset: this.itemsOffset(), scrollSize: (isVertical ? container.nativeElement.scrollTop : container.nativeElement.scrollLeft) + delta,
                     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);
+                this._trackBox.clearDelta();
                 if (container) {
-                    const handler = () => {
-                        if (container) {
-                            container.nativeElement.removeEventListener(SCROLL_END, handler);
-                            const { displayItems, totalSize } = this._trackBox.updateCollection(items, stickyMap, {
-                                ...opts, scrollSize, fromItemId: id,
-                            });
-                            this.resetBoundsSize(isVertical, totalSize);
-                            this.createDisplayComponentsIfNeed(displayItems);
-                            this.tracking();
-                            const _scrollSize = this._trackBox.getItemPosition(id, stickyMap, { ...opts, scrollSize, fromItemId: id });
-                            if (scrollSize < _scrollSize && iteration < MAX_SCROLL_TO_ITERATIONS) {
-                                this.clearScrollToRepeatExecutionTimeout();
-                                this._scrollToRepeatExecutionTimeout = setTimeout(() => {
-                                    this.scrollToExecutor(id, BEHAVIOR_INSTANT, iteration + 1);
-                                });
-                            }
-                            else {
-                                this._scrollSize.set(scrollSize);
-                                container.nativeElement.addEventListener(SCROLL, this._onScrollHandler);
-                                container.nativeElement.addEventListener(SCROLL_END, this._onScrollEndHandler);
-                            }
-                        }
-                    };
-                    container.nativeElement.addEventListener(SCROLL_END, handler);
+                    const { displayItems, totalSize } = this._trackBox.updateCollection(items, stickyMap, {
+                        ...opts, scrollSize, fromItemId: isLastIteration ? undefined : id,
+                    }), delta = this._trackBox.delta;
+                    this._trackBox.clearDelta();
+                    let actualScrollSize = scrollSize + delta;
+                    this.resetBoundsSize(isVertical, totalSize);
+                    this.createDisplayComponentsIfNeed(displayItems);
+                    this.tracking();
+                    const _scrollSize = this._trackBox.getItemPosition(id, stickyMap, { ...opts, scrollSize: actualScrollSize, fromItemId: id });
+                    const notChanged = actualScrollSize === _scrollSize;
+                    if (notChanged) {
+                        iteration += 1;
+                    }
+                    if (iteration < MAX_SCROLL_TO_ITERATIONS) {
+                        this.clearScrollToRepeatExecutionTimeout();
+                        this._scrollToRepeatExecutionTimeout = setTimeout(() => {
+                            this.scrollToExecutor(id, BEHAVIOR_INSTANT, iteration + 1, notChanged);
+                        });
+                    }
+                    else {
+                        this._scrollSize.set(actualScrollSize);
+                        container.nativeElement.addEventListener(SCROLL, this._onScrollHandler);
+                    }
                 }
-                container.nativeElement.scroll(params);
+                container.nativeElement.scrollTo(params);
+                this._scrollSize.set(scrollSize);
             }
             else {
                 const index = items.findIndex(item => item.id === id), scrollSize = index * this.itemSize();
                 const params = { [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollSize, behavior };
-                container.nativeElement.scroll(params);
+                container.nativeElement.scrollTo(params);
             }
         }
     }
@@ -1489,7 +1429,6 @@ 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);
@@ -1503,7 +1442,6 @@ class NgVirtualListComponent {
         }
     };
     _onContainerScrollEndHandler = (e) => {
-        this._isScrollingDebounces.execute(false);
         const containerEl = this._container();
         if (containerEl) {
             const scrollSize = (this._isVertical ? containerEl.nativeElement.scrollTop : containerEl.nativeElement.scrollLeft);
@@ -1523,7 +1461,6 @@ class NgVirtualListComponent {
             containerEl.nativeElement.addEventListener(SCROLL, this._onContainerScrollHandler);
             containerEl.nativeElement.addEventListener(SCROLL_END, this._onContainerScrollEndHandler);
             containerEl.nativeElement.addEventListener(SCROLL, this._onScrollHandler);
-            containerEl.nativeElement.addEventListener(SCROLL_END, this._onScrollEndHandler);
             this._resizeObserver = new ResizeObserver(this._onResizeHandler);
             this._resizeObserver.observe(containerEl.nativeElement);
             this._onResizeHandler();
@@ -1534,13 +1471,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);
-            containerEl.nativeElement.removeEventListener(SCROLL_END, this._onScrollEndHandler);
             containerEl.nativeElement.removeEventListener(SCROLL, this._onContainerScrollHandler);
             containerEl.nativeElement.removeEventListener(SCROLL_END, this._onContainerScrollEndHandler);
             if (this._componentsResizeObserver) {
@@ -1558,7 +1491,7 @@ class NgVirtualListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: NgVirtualListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.4", type: NgVirtualListComponent, isStandalone: true, selector: "ng-virtual-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, snap: { classPropertyName: "snap", publicName: "snap", isSignal: true, isRequired: false, transformFunction: null }, snapToItem: { classPropertyName: "snapToItem", publicName: "snapToItem", isSignal: true, isRequired: false, transformFunction: null }, enabledBufferOptimization: { classPropertyName: "enabledBufferOptimization", publicName: "enabledBufferOptimization", isSignal: true, isRequired: false, transformFunction: null }, itemRenderer: { classPropertyName: "itemRenderer", publicName: "itemRenderer", isSignal: true, isRequired: true, transformFunction: null }, stickyMap: { classPropertyName: "stickyMap", publicName: "stickyMap", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, dynamicSize: { classPropertyName: "dynamicSize", publicName: "dynamicSize", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, itemsOffset: { classPropertyName: "itemsOffset", publicName: "itemsOffset", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd" }, viewQueries: [{ propertyName: "_container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "_list", first: true, predicate: ["list"], descendants: true, isSignal: true }, { propertyName: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }], 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.4", type: NgVirtualListComponent, isStandalone: true, selector: "ng-virtual-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, snap: { classPropertyName: "snap", publicName: "snap", isSignal: true, isRequired: false, transformFunction: null }, enabledBufferOptimization: { classPropertyName: "enabledBufferOptimization", publicName: "enabledBufferOptimization", isSignal: true, isRequired: false, transformFunction: null }, itemRenderer: { classPropertyName: "itemRenderer", publicName: "itemRenderer", isSignal: true, isRequired: true, transformFunction: null }, stickyMap: { classPropertyName: "stickyMap", publicName: "stickyMap", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, dynamicSize: { classPropertyName: "dynamicSize", publicName: "dynamicSize", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, itemsOffset: { classPropertyName: "itemsOffset", publicName: "itemsOffset", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd" }, viewQueries: [{ propertyName: "_container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "_list", first: true, predicate: ["list"], descendants: true, isSignal: true }, { propertyName: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }], 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: NgVirtualListComponent, decorators: [{
             type: Component,