ng-virtual-list 14.0.0 → 14.0.2

package/fesm2020/ng-virtual-list.mjs

@@ -6,7 +6,7 @@ import { Subject, BehaviorSubject, filter, map, takeUntil, tap, combineLatest, d
 
 /**
  * Axis of the arrangement of virtual list elements.
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/main/projects/ng-virtual-list/src/lib/enums/directions.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/14.x/projects/ng-virtual-list/src/lib/enums/directions.ts
  * @author Evgenii Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -31,6 +31,7 @@ const DEFAULT_DYNAMIC_SIZE = false;
 const TRACK_BY_PROPERTY_NAME = 'id';
 const DEFAULT_DIRECTION = Directions.VERTICAL;
 const DISPLAY_OBJECTS_LENGTH_MESUREMENT_ERROR = 1;
+const MAX_SCROLL_TO_ITERATIONS = 5;
 // presets
 const BEHAVIOR_AUTO = 'auto';
 const BEHAVIOR_INSTANT = 'instant';
@@ -57,7 +58,7 @@ const CLASS_LIST_HORIZONTAL = 'horizontal';
 
 /**
  * Virtual list item component
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/main/projects/ng-virtual-list/src/lib/components/ng-virtual-list-item.component.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/14.x/projects/ng-virtual-list/src/lib/components/ng-virtual-list-item.component.ts
  * @author Evgenii Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -134,7 +135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 const HORIZONTAL_ALIASES = [Directions.HORIZONTAL, 'horizontal'], VERTICAL_ALIASES = [Directions.VERTICAL, 'vertical'];
 /**
  * Determines the axis membership of a virtual list
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/main/projects/ng-virtual-list/src/lib/utils/isDirection.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/14.x/projects/ng-virtual-list/src/lib/utils/isDirection.ts
  * @author Evgenii Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -147,7 +148,7 @@ const isDirection = (src, expected) => {
 
 /**
  * Simple debounce function.
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/main/projects/ng-virtual-list/src/lib/utils/debounce.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/14.x/projects/ng-virtual-list/src/lib/utils/debounce.ts
  * @author Evgenii Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -178,7 +179,7 @@ const debounce = (cb, debounceTime = 0) => {
 
 /**
  * Switch css classes
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/main/projects/ng-virtual-list/src/lib/utils/toggleClassName.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/14.x/projects/ng-virtual-list/src/lib/utils/toggleClassName.ts
  * @author Evgenii Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -193,7 +194,7 @@ const toggleClassName = (el, className, remove = false) => {
 
 /**
  * Tracks display items by property
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/main/projects/ng-virtual-list/src/lib/utils/tracker.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/14.x/projects/ng-virtual-list/src/lib/utils/tracker.ts
  * @author Evgenii Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -301,7 +302,7 @@ class Tracker {
 
 /**
  * Simple event emitter
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/main/projects/ng-virtual-list/src/lib/utils/eventEmitter.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/14.x/projects/ng-virtual-list/src/lib/utils/eventEmitter.ts
  * @author Evgenii Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -405,10 +406,11 @@ class EventEmitter {
     }
 }
 
+const MAX_SCROLL_DIRECTION_POOL = 10, CLEAR_SCROLL_DIRECTION_TO = 0;
 /**
  * Cache map.
  * Emits a change event on each mutation.
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/main/projects/ng-virtual-list/src/lib/utils/cacheMap.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/14.x/projects/ng-virtual-list/src/lib/utils/cacheMap.ts
  * @author Evgenii Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -419,13 +421,52 @@ class CacheMap extends EventEmitter {
         this._version = 0;
         this._previouseFullHeigh = 0;
         this._delta = 0;
+        this._deltaDirection = 1;
+        this._scrollDirectionCache = [];
+        this._scrollDirection = 1;
+        this._clearScrollDirectionDebounce = debounce(() => {
+            while (this._scrollDirectionCache.length > CLEAR_SCROLL_DIRECTION_TO) {
+                this._scrollDirectionCache.shift();
+            }
+        }, 10);
     }
     get delta() {
         return this._delta;
     }
+    set deltaDirection(v) {
+        this._deltaDirection = v;
+        this._scrollDirection = this.calcScrollDirection(v);
+    }
+    get deltaDirection() {
+        return this._deltaDirection;
+    }
+    get scrollDirection() {
+        return this._scrollDirection;
+    }
     get version() {
         return this._version;
     }
+    clearScrollDirectionCache() {
+        this._clearScrollDirectionDebounce.execute();
+    }
+    calcScrollDirection(v) {
+        while (this._scrollDirectionCache.length >= MAX_SCROLL_DIRECTION_POOL) {
+            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];
+            dict[dir] += 1;
+        }
+        if (dict[-1] > dict[1]) {
+            return -1;
+        }
+        else if (dict[1] > dict[-1]) {
+            return 1;
+        }
+        return -1;
+    }
     bumpVersion() {
         this._version = this._version === Number.MAX_SAFE_INTEGER ? 0 : this._version + 1;
     }
@@ -459,7 +500,7 @@ class CacheMap extends EventEmitter {
 const TRACK_BOX_CHANGE_EVENT_NAME = 'change';
 /**
  * An object that performs tracking, calculations and caching.
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/main/projects/ng-virtual-list/src/lib/utils/trackBox.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/14.x/projects/ng-virtual-list/src/lib/utils/trackBox.ts
  * @author Evgenii Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -497,12 +538,12 @@ class TrackBox extends CacheMap {
         this._debounceChanges.execute(this._version);
     }
     getItemPosition(id, stickyMap, options) {
-        const opt = { fromItemId: id, stickyMap, scrollDirection: undefined, ...options };
+        const opt = { fromItemId: id, stickyMap, ...options };
         const { scrollSize } = this.recalculateMetrics(opt);
         return scrollSize;
     }
     updateCollection(items, stickyMap, options) {
-        const opt = { stickyMap, scrollDirection: undefined, ...options };
+        const opt = { stickyMap, ...options };
         this.cacheElements();
         const metrics = this.recalculateMetrics({
             ...opt,
@@ -511,14 +552,35 @@ class TrackBox extends CacheMap {
         const displayItems = this.generateDisplayCollection(items, stickyMap, metrics);
         return { displayItems, totalSize: metrics.totalSize, delta: metrics.delta };
     }
+    getElementNumToEnd(i, collection, map, typicalItemSize, size, isVertical) {
+        const sizeProperty = isVertical ? HEIGHT_PROP_NAME : WIDTH_PROP_NAME;
+        let offset = 0, num = 0;
+        for (let j = collection.length - 1; j >= i; j--) {
+            const item = collection[j];
+            let itemSize = 0;
+            if (map.has(item.id)) {
+                const bounds = map.get(item.id);
+                itemSize = bounds ? bounds[sizeProperty] : typicalItemSize;
+            }
+            else {
+                itemSize = typicalItemSize;
+            }
+            offset += itemSize;
+            num++;
+            if (offset > size) {
+                return { num: 0, offset };
+            }
+        }
+        return { num, offset };
+    }
     /**
      * Calculates list metrics
      */
     recalculateMetrics(options) {
-        const { scrollDirection = 0, 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, totalSize = dynamicSize ? this.getBoundsFromCache(collection, typicalItemSize, isVertical) : totalLength * 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 } = 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, 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, itemById = undefined, itemByIdPos = 0, lastDisplayItemId = undefined, actualScrollSize = itemByIdPos, fullHeight = 0, startIndex;
+        let itemsFromStartToScrollEnd = -1, itemsFromDisplayEndToOffsetEnd = 0, itemsFromStartToDisplayEnd = -1, leftItemLength = 0, rightItemLength = 0, leftItemsWeight = 0, rightItemsWeight = 0, leftHiddenItemsWeight = 0, totalItemsToDisplayEndWeight = 0, itemById = undefined, itemByIdPos = 0, lastDisplayItemId = undefined, actualScrollSize = itemByIdPos, totalSize = 0, startIndex;
         if (dynamicSize) {
             let y = 0, stickyCollectionItem = undefined, stickyComponentSize = 0;
             for (let i = 0, l = collection.length; i < l; i++) {
@@ -531,21 +593,31 @@ class TrackBox extends CacheMap {
                 else {
                     componentSize = typicalItemSize;
                 }
+                totalSize += componentSize;
                 if (isFromId) {
                     if (itemById === undefined) {
-                        leftItemsWeights.push(componentSize);
-                        leftHiddenItemsWeight += componentSize;
-                        itemsFromStartToScrollEnd = ii;
                         if (stickyMap && stickyMap[collectionItem.id] > 0) {
                             stickyComponentSize = componentSize;
                             stickyCollectionItem = collectionItem;
                         }
                         if (collectionItem.id === fromItemId) {
-                            itemById = collectionItem;
-                            itemByIdPos = y;
                             if (stickyCollectionItem && stickyMap && stickyMap[stickyCollectionItem.id] > 0) {
-                                itemByIdPos = itemByIdPos - stickyComponentSize;
+                                const { num } = this.getElementNumToEnd(i, collection, map, typicalItemSize, size, isVertical);
+                                if (num > 0) {
+                                    y -= size - componentSize;
+                                }
+                                else {
+                                    y -= stickyComponentSize;
+                                    leftHiddenItemsWeight -= stickyComponentSize;
+                                }
                             }
+                            itemById = collectionItem;
+                            itemByIdPos = y;
+                        }
+                        else {
+                            leftItemsWeights.push(componentSize);
+                            leftHiddenItemsWeight += componentSize;
+                            itemsFromStartToScrollEnd = ii;
                         }
                     }
                 }
@@ -573,7 +645,6 @@ class TrackBox extends CacheMap {
                 }
                 y += componentSize;
             }
-            fullHeight = y;
             if (itemsFromStartToScrollEnd === -1) {
                 itemsFromStartToScrollEnd = 0;
             }
@@ -599,12 +670,12 @@ class TrackBox extends CacheMap {
             rightItemsWeight = rightItemLength * typicalItemSize,
                 leftHiddenItemsWeight = itemsFromStartToScrollEnd * typicalItemSize,
                 totalItemsToDisplayEndWeight = itemsFromStartToDisplayEnd * typicalItemSize;
-            actualScrollSize = scrollSize,
-                fullHeight = totalLength * typicalItemSize;
+            actualScrollSize = scrollSize;
+            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 = fullHeight - this._previouseFullHeigh;
-        if (scrollDirection === -1) {
+        const itemsOnDisplay = totalItemsToDisplayEndWeight - leftHiddenItemsWeight, itemsOnDisplayLength = itemsFromStartToDisplayEnd - itemsFromStartToScrollEnd, startPosition = leftHiddenItemsWeight - leftItemsWeight, renderItems = itemsOnDisplayLength + leftItemLength + rightItemLength, delta = totalSize - this._previouseFullHeigh;
+        if (this.scrollDirection === -1) {
             this._delta += delta;
         }
         const metrics = {
@@ -637,13 +708,17 @@ class TrackBox extends CacheMap {
             totalSize,
             typicalItemSize,
         };
-        if (scrollDirection !== 0) {
-            this._previouseFullHeigh = fullHeight;
-        }
+        this._previouseFullHeigh = totalSize;
         return metrics;
     }
-    clearDelta() {
+    clearDeltaDirection() {
+        this.clearScrollDirectionCache();
+    }
+    clearDelta(clearDirectionDetector = false) {
         this._delta = 0;
+        if (clearDirectionDetector) {
+            this.clearScrollDirectionCache();
+        }
     }
     generateDisplayCollection(items, stickyMap, metrics) {
         const { 
@@ -806,7 +881,7 @@ class TrackBox extends CacheMap {
 
 /**
  * Base disposable component
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/main/projects/ng-virtual-list/src/lib/utils/disposableComponent.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/14.x/projects/ng-virtual-list/src/lib/utils/disposableComponent.ts
  * @author Evgenii Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -834,7 +909,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Virtual list component.
  * Maximum performance for extremely large lists.
  * It is based on algorithms for virtualization of screen objects.
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/main/projects/ng-virtual-list/src/lib/ng-virtual-list.component.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/14.x/projects/ng-virtual-list/src/lib/ng-virtual-list.component.ts
  * @author Evgenii Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -882,21 +957,15 @@ class NgVirtualListComponent extends DisposableComponent {
         this._$bounds = new BehaviorSubject(null);
         this._$scrollSize = new BehaviorSubject(0);
         this._resizeObserver = null;
-        /**
-         * only dynamic
-         */
-        this._$scrolledItemId = new BehaviorSubject(undefined);
         this._onResizeHandler = () => {
             this._$bounds.next(this._container?.nativeElement?.getBoundingClientRect() ?? null);
         };
-        this._scrollDirection = 0;
         this._onScrollHandler = (e) => {
-            this._$scrolledItemId.next(undefined);
             const container = this._container?.nativeElement;
             if (container) {
                 const dynamicSize = this.dynamicSize, delta = this._trackBox.delta, scrollSize = (this._isVertical ? container.scrollTop : container.scrollLeft), previouseScrollSize = this._$scrollSize.getValue();
                 let actualScrollSize = scrollSize;
-                this._scrollDirection = previouseScrollSize > scrollSize ? -1 : 1;
+                this._trackBox.deltaDirection = previouseScrollSize > scrollSize ? -1 : 1;
                 if (dynamicSize && delta !== 0) {
                     actualScrollSize = scrollSize + delta;
                     const params = {
@@ -910,13 +979,15 @@ class NgVirtualListComponent extends DisposableComponent {
                     }
                 }
                 this._$scrollSize.next(actualScrollSize);
-                this.onScroll.emit(actualScrollSize);
+                this.onScroll.emit({ scrollSize: actualScrollSize, direction: this._trackBox.scrollDirection });
             }
         };
         this._scrollImmediatelyHandler = undefined;
-        this._onScrollEndHandler = (e, fireEvent = true) => {
+        this._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 && delta !== 0) {
@@ -926,7 +997,6 @@ class NgVirtualListComponent extends DisposableComponent {
                             [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: actualScrollSize,
                             behavior: BEHAVIOR_INSTANT
                         };
-                        this._trackBox.clearDelta();
                         this._$scrollSize.next(actualScrollSize);
                         container.nativeElement.scroll(params);
                         return;
@@ -944,9 +1014,7 @@ class NgVirtualListComponent extends DisposableComponent {
                     }
                 }
                 this._$scrollSize.next(actualScrollSize);
-                if (fireEvent) {
-                    this.onScrollEnd.emit(actualScrollSize);
-                }
+                this.onScroll.emit({ scrollSize: actualScrollSize, direction: this._trackBox.scrollDirection });
             }
         };
         this._$initialized = new BehaviorSubject(false);
@@ -964,7 +1032,7 @@ class NgVirtualListComponent extends DisposableComponent {
         this._$initialized = new BehaviorSubject(false);
         this.$initialized = this._$initialized.asObservable();
         this._trackBox.displayComponents = this._displayComponents;
-        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, $scrolledItemId = this._$scrolledItemId.asObservable();
+        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;
         $isVertical.pipe(takeUntil(this._$unsubscribe), tap(v => {
             this._isVertical = v;
             const el = this._elementRef.nativeElement;
@@ -973,33 +1041,21 @@ class NgVirtualListComponent extends DisposableComponent {
         $dynamicSize.pipe(takeUntil(this._$unsubscribe), tap(dynamicSize => {
             this.listenCacheChangesIfNeed(dynamicSize);
         })).subscribe();
-        combineLatest([this.$initialized, $scrolledItemId, $bounds, $items, $stickyMap, $scrollSize, $itemSize,
+        combineLatest([this.$initialized, $bounds, $items, $stickyMap, $scrollSize, $itemSize,
             $itemsOffset, $snap, $isVertical, $dynamicSize, $cacheVersion,
-        ]).pipe(takeUntil(this._$unsubscribe), distinctUntilChanged(), debounceTime(0), filter(([initialized]) => !!initialized), switchMap(([, scrolledItemId, bounds, items, stickyMap, scrollSize, itemSize, itemsOffset, snap, isVertical, dynamicSize, cacheVersion,]) => {
+        ]).pipe(takeUntil(this._$unsubscribe), distinctUntilChanged(), debounceTime(0), filter(([initialized]) => !!initialized), switchMap(([, bounds, items, stickyMap, scrollSize, itemSize, itemsOffset, snap, isVertical, dynamicSize, cacheVersion,]) => {
             const { width, height } = bounds;
             let actualScrollSize = scrollSize;
             const opts = {
                 bounds: { width, height }, collection: items, dynamicSize, isVertical, itemSize,
-                itemsOffset, scrollSize: scrollSize, snap, fromItemId: scrolledItemId,
+                itemsOffset, scrollSize: scrollSize, snap,
             };
-            if (dynamicSize && scrolledItemId !== undefined) {
-                const scrollSize = this._trackBox.getItemPosition(scrolledItemId, stickyMap, { ...opts, scrollSize: actualScrollSize });
-                actualScrollSize = scrollSize;
-                this._$scrollSize.next(actualScrollSize);
-            }
-            const scrollDirection = this._scrollDirection, { displayItems, totalSize } = this._trackBox.updateCollection(items, stickyMap, {
-                ...opts, scrollSize: actualScrollSize, scrollDirection
+            const { displayItems, totalSize } = this._trackBox.updateCollection(items, stickyMap, {
+                ...opts, scrollSize: actualScrollSize,
             });
             this.resetBoundsSize(isVertical, totalSize);
             this.createDisplayComponentsIfNeed(displayItems);
             this.tracking();
-            if (dynamicSize && scrolledItemId !== undefined) {
-                const container = this._container;
-                if (container) {
-                    const params = { [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollSize, behavior: BEHAVIOR_AUTO };
-                    this.scrollImmediately(container, params);
-                }
-            }
             return of(displayItems);
         })).subscribe();
         combineLatest([this.$initialized, this.$itemRenderer]).pipe(takeUntil(this._$unsubscribe), distinctUntilChanged(), filter(([initialized]) => !!initialized), tap(([, itemRenderer]) => {
@@ -1213,6 +1269,13 @@ class NgVirtualListComponent extends DisposableComponent {
      * Behavior accepts the values ​​"auto", "instant" and "smooth".
      */
     scrollTo(id, behavior = BEHAVIOR_AUTO) {
+        this.scrollToExecutor(id, behavior);
+    }
+    clearScrollToRepeatExecutionTimeout() {
+        clearTimeout(this._scrollToRepeatExecutionTimeout);
+    }
+    scrollToExecutor(id, behavior, iteration = 0) {
+        this.clearScrollToRepeatExecutionTimeout();
         const items = this.items;
         if (!items || !items.length) {
             return;
@@ -1224,24 +1287,35 @@ class NgVirtualListComponent extends DisposableComponent {
                     container.nativeElement.removeEventListener(SCROLL, this._onScrollHandler);
                     container.nativeElement.removeEventListener(SCROLL_END, this._onScrollEndHandler);
                 }
-                const { width, height } = this._$bounds.getValue() || { width: 0, height: 0 }, stickyMap = this.stickyMap, items = this.items, opts = {
+                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: this._isVertical ? container.nativeElement.scrollTop : container.nativeElement.scrollLeft,
+                    itemsOffset: this.itemsOffset, scrollSize: isVertical ? container.nativeElement.scrollTop : container.nativeElement.scrollLeft,
                     snap: this.snap, fromItemId: id,
-                }, scrollSize = this._trackBox.getItemPosition(id, stickyMap, opts), params = { [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollSize, behavior };
-                this._$scrolledItemId.next(id);
+                }, scrollSize = this._trackBox.getItemPosition(id, stickyMap, opts), params = { [isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollSize, behavior };
                 this._$scrollSize.next(scrollSize);
                 if (container) {
                     const handler = () => {
                         if (container) {
                             container.nativeElement.removeEventListener(SCROLL_END, handler);
-                            clearTimeout(this._scrollToTimeout);
-                            this._scrollToTimeout = setTimeout(() => {
+                            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.next(scrollSize);
+                                this.onScroll.emit({ scrollSize, direction: this._trackBox.scrollDirection });
                                 container.nativeElement.addEventListener(SCROLL, this._onScrollHandler);
                                 container.nativeElement.addEventListener(SCROLL_END, this._onScrollEndHandler);
-                            }, 100);
-                            this.listenCacheChangesIfNeed(dynamicSize);
-                            this.onScroll.emit(scrollSize);
+                            }
                         }
                     };
                     container.nativeElement.addEventListener(SCROLL_END, handler);
@@ -1271,9 +1345,7 @@ class NgVirtualListComponent extends DisposableComponent {
     }
     ngOnDestroy() {
         super.ngOnDestroy();
-        if (this._scrollToTimeout) {
-            clearTimeout(this._scrollToTimeout);
-        }
+        this.clearScrollToRepeatExecutionTimeout();
         if (this._trackBox) {
             this._trackBox.dispose();
         }