ng-virtual-list 20.0.21 → 20.0.23

package/README.md

@@ -443,7 +443,7 @@ Inputs
 | Property | Type | Description |
 |---|---|---|
 | id | number | Readonly. Returns the unique identifier of the component. | 
-| items | [IVirtualListCollection](https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/models/collection.model.ts) | Collection of list items. |
+| items | [IVirtualListCollection](https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/models/collection.model.ts) | Collection of list items. The collection of elements must be immutable. |
 | itemSize | number? = 24 | If direction = 'vertical', then the height of a typical element. If direction = 'horizontal', then the width of a typical element. Ignored if the dynamicSize property is true. |
 | itemsOffset | number? = 2 | Number of elements outside the scope of visibility. Default value is 2. |
 | itemRenderer | TemplateRef | Rendering element template. |
@@ -453,6 +453,7 @@ Inputs
 | 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. |
+| trackBy | string? = 'id' | The name of the property by which tracking is performed. |
 
 <br/>
 
@@ -477,12 +478,12 @@ Methods
 
 | Angular version | ng-virtual-list version | git | npm |
 |--|--|--|--|
-| 19.x | 19.1.24 | [19.x](https://github.com/DjonnyX/ng-virtual-list/tree/19.x) | [19.1.24](https://www.npmjs.com/package/ng-virtual-list/v/19.1.24) |
-| 18.x | 18.0.13 | [18.x](https://github.com/DjonnyX/ng-virtual-list/tree/18.x) | [18.0.13](https://www.npmjs.com/package/ng-virtual-list/v/18.0.13) |
-| 17.x | 17.0.10 | [17.x](https://github.com/DjonnyX/ng-virtual-list/tree/17.x) | [17.0.10](https://www.npmjs.com/package/ng-virtual-list/v/17.0.10) |
-| 16.x | 16.0.13 | [16.x](https://github.com/DjonnyX/ng-virtual-list/tree/16.x) | [16.0.13](https://www.npmjs.com/package/ng-virtual-list/v/16.0.13) |
-| 15.x | 15.0.11 | [15.x](https://github.com/DjonnyX/ng-virtual-list/tree/15.x) | [15.0.11](https://www.npmjs.com/package/ng-virtual-list/v/15.0.11) |
-| 14.x | 14.0.11 | [14.x](https://github.com/DjonnyX/ng-virtual-list/tree/14.x) | [14.0.11](https://www.npmjs.com/package/ng-virtual-list/v/14.0.11) |
+| 19.x | 19.1.27 | [19.x](https://github.com/DjonnyX/ng-virtual-list/tree/19.x) | [19.1.27](https://www.npmjs.com/package/ng-virtual-list/v/19.1.27) |
+| 18.x | 18.0.15 | [18.x](https://github.com/DjonnyX/ng-virtual-list/tree/18.x) | [18.0.15](https://www.npmjs.com/package/ng-virtual-list/v/18.0.15) |
+| 17.x | 17.0.12 | [17.x](https://github.com/DjonnyX/ng-virtual-list/tree/17.x) | [17.0.12](https://www.npmjs.com/package/ng-virtual-list/v/17.0.12) |
+| 16.x | 16.0.15 | [16.x](https://github.com/DjonnyX/ng-virtual-list/tree/16.x) | [16.0.15](https://www.npmjs.com/package/ng-virtual-list/v/16.0.15) |
+| 15.x | 15.0.13 | [15.x](https://github.com/DjonnyX/ng-virtual-list/tree/15.x) | [15.0.13](https://www.npmjs.com/package/ng-virtual-list/v/15.0.13) |
+| 14.x | 14.0.13 | [14.x](https://github.com/DjonnyX/ng-virtual-list/tree/14.x) | [14.0.13](https://www.npmjs.com/package/ng-virtual-list/v/14.0.13) |
 
 <br/>
 

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, filter, map, tap, combineLatest, distinctUntilChanged, switchMap, of } from 'rxjs';
+import { BehaviorSubject, tap, filter, map, combineLatest, distinctUntilChanged, switchMap, of } from 'rxjs';
 
 /**
  * Axis of the arrangement of virtual list elements.
@@ -79,7 +79,7 @@ class NgVirtualListItemComponent {
         const data = this._data = v;
         if (data) {
             const styles = this._elementRef.nativeElement.style;
-            styles.zIndex = data.config.sticky;
+            styles.zIndex = String(data.config.sticky);
             if (data.config.snapped) {
                 styles.transform = ZEROS_TRANSLATE_3D;
                 styles.position = POSITION_STICKY;
@@ -93,6 +93,9 @@ class NgVirtualListItemComponent {
         }
         this.data.set(v);
     }
+    get item() {
+        return this._data;
+    }
     get itemId() {
         return this._data?.id;
     }
@@ -101,6 +104,9 @@ class NgVirtualListItemComponent {
         this.itemRenderer.set(v);
     }
     _elementRef = inject((ElementRef));
+    get element() {
+        return this._elementRef.nativeElement;
+    }
     constructor() {
         this._id = NgVirtualListItemComponent.__nextId = NgVirtualListItemComponent.__nextId === Number.MAX_SAFE_INTEGER
             ? 0 : NgVirtualListItemComponent.__nextId + 1;
@@ -221,6 +227,9 @@ class Tracker {
         return this._trackMap;
     }
     _trackingPropertyName;
+    set trackingPropertyName(v) {
+        this._trackingPropertyName = v;
+    }
     constructor(trackingPropertyName) {
         this._trackingPropertyName = trackingPropertyName;
     }
@@ -238,17 +247,17 @@ class Tracker {
                 const diId = this._trackMap[itemTrackingProperty];
                 if (this._trackMap.hasOwnProperty(itemTrackingProperty)) {
                     const lastIndex = this._displayObjectIndexMapById[diId], el = components[lastIndex];
-                    this._checkComponentProperty(el?.instance);
-                    const elId = el?.instance?.[itemTrackingProperty];
+                    const elId = el?.instance?.id;
                     if (el && elId === diId) {
                         const indexByUntrackedItems = untrackedItems.findIndex(v => {
-                            this._checkComponentProperty(v.instance);
-                            return v.instance[itemTrackingProperty] === elId;
+                            return v.instance.id === elId;
                         });
                         if (indexByUntrackedItems > -1) {
-                            el.instance.item = item;
-                            if (afterComponentSetup !== undefined) {
-                                afterComponentSetup(el.instance, item);
+                            if (el.instance.item !== item) {
+                                el.instance.item = item;
+                                if (afterComponentSetup !== undefined) {
+                                    afterComponentSetup(el.instance, item);
+                                }
                             }
                             untrackedItems.splice(indexByUntrackedItems, 1);
                             continue;
@@ -260,13 +269,14 @@ class Tracker {
             if (untrackedItems.length > 0) {
                 const el = untrackedItems.shift(), item = items[i];
                 if (el) {
-                    el.instance.item = item;
-                    if (this._trackMap) {
-                        this._checkComponentProperty(el.instance);
-                        this._trackMap[itemTrackingProperty] = el.instance[itemTrackingProperty];
-                    }
-                    if (afterComponentSetup !== undefined) {
-                        afterComponentSetup(el.instance, item);
+                    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);
+                        }
                     }
                 }
             }
@@ -280,23 +290,10 @@ class Tracker {
             return;
         }
         const propertyIdName = this._trackingPropertyName;
-        this._checkComponentProperty(component);
         if (this._trackMap && component[propertyIdName] !== undefined) {
             delete this._trackMap[propertyIdName];
         }
     }
-    _checkComponentProperty(component) {
-        if (!component) {
-            return;
-        }
-        const propertyIdName = this._trackingPropertyName;
-        try {
-            component[propertyIdName];
-        }
-        catch (err) {
-            throw Error(`Property ${propertyIdName} does not exist.`);
-        }
-    }
     dispose() {
         this._trackMap = null;
     }
@@ -475,7 +472,11 @@ class CacheMap extends EventEmitter {
         this.dispatch('change', this.version);
     }
     set(id, bounds) {
-        if (this._map.has(id) && JSON.stringify(this._map.get(id)) === JSON.stringify(bounds)) {
+        if (this._map.has(id)) {
+            const b = this._map.get(id), bb = bounds;
+            if (b.width === bb.width && b.height === bb.height) {
+                return this._map;
+            }
             return this._map;
         }
         const v = this._map.set(id, bounds);
@@ -502,56 +503,6 @@ class CacheMap extends EventEmitter {
     }
 }
 
-/**
- * Returns the removed or updated elements of a collection.
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/collection.ts
- * @author Evgenii Grebennikov
- * @email djonnyx@gmail.com
- */
-const getCollectionRemovedOrUpdatedItems = (previousCollection, currentCollection) => {
-    const result = { deleted: new Array(), updated: new Array(), added: new Array(), notChanged: new Array() };
-    if (!currentCollection || currentCollection.length === 0) {
-        return { deleted: (previousCollection ? [...previousCollection] : []), updated: [], added: [], notChanged: [] };
-    }
-    if (!previousCollection || previousCollection.length === 0) {
-        return { deleted: [], updated: [], added: (currentCollection ? [...currentCollection] : []), notChanged: [] };
-    }
-    const collectionDict = {};
-    for (let i = 0, l = currentCollection.length; i < l; i++) {
-        const item = currentCollection[i];
-        if (item) {
-            collectionDict[item.id] = item;
-        }
-    }
-    const notChangedMap = {}, deletedMap = {}, updatedMap = {};
-    for (let i = 0, l = previousCollection.length; i < l; i++) {
-        const item = previousCollection[i], id = item.id;
-        if (item) {
-            if (collectionDict.hasOwnProperty(id)) {
-                if (item === collectionDict[id]) {
-                    result.notChanged.push(item);
-                    notChangedMap[item.id] = item;
-                    continue;
-                }
-                else {
-                    result.updated.push(item);
-                    updatedMap[item.id] = item;
-                    continue;
-                }
-            }
-            result.deleted.push(item);
-            deletedMap[item.id] = item;
-        }
-    }
-    for (let i = 0, l = currentCollection.length; i < l; i++) {
-        const item = currentCollection[i], id = item.id;
-        if (item && !deletedMap.hasOwnProperty(id) && !updatedMap.hasOwnProperty(id) && !notChangedMap.hasOwnProperty(id)) {
-            result.added.push(item);
-        }
-    }
-    return result;
-};
-
 const TRACK_BOX_CHANGE_EVENT_NAME = 'change';
 var ItemDisplayMethods;
 (function (ItemDisplayMethods) {
@@ -582,13 +533,22 @@ class TrackBox extends CacheMap {
         }
         this._displayComponents = v;
     }
+    /**
+     * Set the trackBy property
+     */
+    set trackingPropertyName(v) {
+        this._tracker.trackingPropertyName = v;
+    }
     constructor(trackingPropertyName) {
         super();
         this._tracker = new Tracker(trackingPropertyName);
     }
     set(id, bounds) {
-        if (this._map.has(id) && JSON.stringify(this._map.get(id)) === JSON.stringify(bounds)) {
-            return this._map;
+        if (this._map.has(id)) {
+            const b = this._map.get(id);
+            if (b?.width === bounds.width && b.height === bounds.height) {
+                return this._map;
+            }
         }
         const v = this._map.set(id, bounds);
         this.bumpVersion();
@@ -611,31 +571,69 @@ class TrackBox extends CacheMap {
             console.warn('Attention! The collection must be immutable.');
             return;
         }
-        const { deleted, updated, added } = getCollectionRemovedOrUpdatedItems(this._previousCollection, currentCollection);
-        this.clearCache(deleted, updated, added, itemSize);
+        this.updateCache(this._previousCollection, currentCollection, itemSize);
         this._previousCollection = currentCollection;
     }
     /**
-     * Clears the cache of items from the list
+     * Update the cache of items from the list
      */
-    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);
+    updateCache(previousCollection, currentCollection, itemSize) {
+        if (!currentCollection || currentCollection.length === 0) {
+            if (previousCollection) {
+                // deleted
+                for (let i = 0, l = previousCollection.length; i < l; i++) {
+                    const item = previousCollection[i], id = item.id;
+                    if (this._map.has(id)) {
+                        this._map.delete(id);
+                    }
+                }
+            }
+            return;
+        }
+        if (!previousCollection || previousCollection.length === 0) {
+            if (currentCollection) {
+                // added
+                for (let i = 0, l = currentCollection.length; i < l; i++) {
+                    const item = currentCollection[i], id = item.id;
+                    this._map.set(id, { x: 0, y: 0, width: itemSize, height: itemSize, method: ItemDisplayMethods.CREATE });
                 }
             }
+            return;
         }
-        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 });
+        const collectionDict = {};
+        for (let i = 0, l = currentCollection.length; i < l; i++) {
+            const item = currentCollection[i];
+            if (item) {
+                collectionDict[item.id] = item;
+            }
+        }
+        const notChangedMap = {}, deletedMap = {}, updatedMap = {};
+        for (let i = 0, l = previousCollection.length; i < l; i++) {
+            const item = previousCollection[i], id = item.id;
+            if (item) {
+                if (collectionDict.hasOwnProperty(id)) {
+                    if (item === collectionDict[id]) {
+                        // not changed
+                        notChangedMap[item.id] = item;
+                        this._map.set(id, { ...(this._map.get(id) || { x: 0, y: 0, width: itemSize, height: itemSize }), method: ItemDisplayMethods.NOT_CHANGED });
+                        continue;
+                    }
+                    else {
+                        // updated
+                        updatedMap[item.id] = item;
+                        this._map.set(id, { ...(this._map.get(id) || { x: 0, y: 0, width: itemSize, height: itemSize }), method: ItemDisplayMethods.UPDATE });
+                        continue;
+                    }
+                }
+                // deleted
+                deletedMap[item.id] = item;
+                this._map.delete(id);
             }
         }
-        if (added) {
-            for (let i = 0, l = added.length; i < l; i++) {
-                const item = added[i], id = item.id;
+        for (let i = 0, l = currentCollection.length; i < l; i++) {
+            const item = currentCollection[i], id = item.id;
+            if (item && !deletedMap.hasOwnProperty(id) && !updatedMap.hasOwnProperty(id) && !notChangedMap.hasOwnProperty(id)) {
+                // added
                 this._map.set(id, { x: 0, y: 0, width: itemSize, height: itemSize, method: ItemDisplayMethods.CREATE });
             }
         }
@@ -907,6 +905,10 @@ class TrackBox extends CacheMap {
             this.clearScrollDirectionCache();
         }
     }
+    changes() {
+        this.bumpVersion();
+        this.fireChange();
+    }
     generateDisplayCollection(items, stickyMap, metrics) {
         const { normalizedItemWidth, normalizedItemHeight, dynamicSize, itemsFromStartToScrollEnd, isVertical, renderItems: renderItemsLength, scrollSize, sizeProperty, snap, snippedPos, startPosition, totalLength, startIndex, typicalItemSize, } = metrics, displayItems = [];
         if (items.length) {
@@ -1175,13 +1177,14 @@ class NgVirtualListComponent {
     _onResizeHandler = () => {
         this._bounds.set(this._container()?.nativeElement?.getBoundingClientRect() ?? null);
     };
+    _scrolls = new Map();
     _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 = {
@@ -1190,48 +1193,45 @@ class NgVirtualListComponent {
                 };
                 const container = this._container();
                 if (container) {
-                    isImmediateScroll = true;
+                    isScrollIUmmediate = true;
                     this.scrollImmediately(container, params);
-                    this._trackBox.clearDelta();
                 }
             }
-            this._scrollSize.set(actualScrollSize);
+            if (!isScrollIUmmediate) {
+                this._scrollSize.set(actualScrollSize);
+            }
         }
     };
     scrollImmediately(container, params, cb) {
-        this.clearScrollImmediately();
+        if (this._scrolls.size > 0) {
+            container.nativeElement.scrollTo(params);
+            return;
+        }
+        this._trackBox.clearDelta();
         container.nativeElement.removeEventListener(SCROLL_END, this._onScrollEndHandler);
+        container.nativeElement.removeEventListener(SCROLL, this._onScrollHandler);
         const handler = () => {
+            const container = this._container();
             if (container) {
                 container.nativeElement.removeEventListener(SCROLL_END, handler);
-                container.nativeElement.scroll(params);
+                this._scrolls.delete(handler);
+                container.nativeElement.addEventListener(SCROLL_END, this._onScrollEndHandler);
+                container.nativeElement.addEventListener(SCROLL, this._onScrollHandler);
                 if (cb !== undefined) {
                     cb();
                 }
-                container.nativeElement.addEventListener(SCROLL_END, this._onScrollEndHandler);
             }
         };
+        this._scrolls.set(handler, true);
         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);
-        }
+        container.nativeElement.scrollTo(params);
     }
     _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;
+            this._trackBox.clearDeltaDirection();
             if (dynamicSize) {
                 actualScrollSize = scrollSize + delta;
                 if (snapToItem) {
@@ -1239,15 +1239,17 @@ class NgVirtualListComponent {
                     if (targetItem) {
                         this.scrollTo(targetItem.id, BEHAVIOR_INSTANT);
                     }
+                    this._trackBox.clearDelta();
                 }
                 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;
+                    const container = this._container();
+                    if (container) {
+                        this.scrollImmediately(container, params);
+                    }
                 }
             }
             else {
@@ -1258,19 +1260,25 @@ class NgVirtualListComponent {
                         [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: actualScrollSize,
                         behavior: BEHAVIOR_INSTANT
                     };
-                    container.nativeElement.scroll(params);
+                    const container = this._container();
+                    if (container) {
+                        this.scrollImmediately(container, params);
+                    }
                 }
             }
-            this._scrollSize.set(actualScrollSize);
         }
     };
     _elementRef = inject((ElementRef));
     _initialized;
     $initialized;
+    /**
+     * The name of the property by which tracking is performed
+     */
+    trackBy = input(TRACK_BY_PROPERTY_NAME);
     /**
      * Dictionary of element sizes by their id
      */
-    _trackBox = new TrackBox(TRACK_BY_PROPERTY_NAME);
+    _trackBox = new TrackBox(this.trackBy());
     _onTrackBoxChangeHandler = (v) => {
         this._$cacheVersion.next(v);
     };
@@ -1283,6 +1291,10 @@ class NgVirtualListComponent {
         this._initialized = signal(false);
         this.$initialized = toObservable(this._initialized);
         this._trackBox.displayComponents = this._displayComponents;
+        const $trackBy = toObservable(this.trackBy);
+        $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;
         $isVertical.pipe(takeUntilDestroyed(), tap(v => {
             this._isVertical = v;
@@ -1309,17 +1321,20 @@ class NgVirtualListComponent {
             this.tracking();
             const container = this._container();
             if (!this.isScrolling && dynamicSize && container) {
-                actualScrollSize = scrollSize + delta;
+                actualScrollSize = scrollSize + this._trackBox.delta;
                 if (snapToItem) {
-                    // etc
+                    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.scrollImmediately(container, params);
                     this._trackBox.clearDelta();
+                    container.nativeElement.scrollTo(params);
                 }
             }
             return of(displayItems);
@@ -1347,6 +1362,9 @@ class NgVirtualListComponent {
         const dir = d || this.direction();
         return isDirection(dir, Directions.VERTICAL);
     }
+    _componentsResizeObserver = new ResizeObserver(() => {
+        this._trackBox.changes();
+    });
     createDisplayComponentsIfNeed(displayItems) {
         if (!displayItems || !this._listContainerRef) {
             this._trackBox.setDisplayObjectIndexMapById({});
@@ -1358,15 +1376,19 @@ class NgVirtualListComponent {
             if (_listContainerRef) {
                 const comp = _listContainerRef.createComponent(NgVirtualListItemComponent);
                 this._displayComponents.push(comp);
+                this._componentsResizeObserver.observe(comp.instance.element);
             }
         }
         const maxLength = displayItems.length;
         while (this._displayComponents.length > maxLength) {
             const comp = this._displayComponents.pop();
-            comp?.destroy();
-            const id = comp?.instance.item?.id;
-            if (id !== undefined) {
-                this._trackBox.untrackComponentByIdProperty(comp?.instance);
+            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();
@@ -1455,12 +1477,12 @@ class NgVirtualListComponent {
                     };
                     container.nativeElement.addEventListener(SCROLL_END, handler);
                 }
-                container.nativeElement.scroll(params);
+                container.nativeElement.scrollTo(params);
             }
             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);
             }
         }
     }
@@ -1509,6 +1531,15 @@ class NgVirtualListComponent {
             this._onResizeHandler();
         }
     }
+    clearScrollImmediately() {
+        const container = this._container();
+        if (container) {
+            this._scrolls.forEach((_, handler) => {
+                container.nativeElement.removeEventListener(SCROLL_END, handler);
+            });
+        }
+        this._scrolls.clear();
+    }
     ngOnDestroy() {
         this.clearScrollToRepeatExecutionTimeout();
         if (this._trackBox) {
@@ -1517,14 +1548,18 @@ class NgVirtualListComponent {
         if (this._isScrollingDebounces) {
             this._isScrollingDebounces.dispose();
         }
+        this.clearScrollImmediately();
         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) {
+                this._componentsResizeObserver.disconnect();
+            }
             if (this._resizeObserver) {
-                this._resizeObserver.unobserve(containerEl.nativeElement);
+                this._resizeObserver.disconnect();
             }
         }
         if (this._displayComponents) {
@@ -1535,7 +1570,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 } }, 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 }, 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: NgVirtualListComponent, decorators: [{
             type: Component,