ng-virtual-list 19.1.20 → 19.1.22

package/README.md

@@ -451,6 +451,8 @@ Inputs
 | 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/19.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. |
+| likeAChat | boolean? = false | If true, optimization for lists that start from the end is enabled. |
 
 <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.
@@ -27,6 +27,8 @@ 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_OPTIMIZE_FOR_END = false;
 const DEFAULT_SNAP_TO_ITEM = false;
 const DEFAULT_DYNAMIC_SIZE = false;
 const TRACK_BY_PROPERTY_NAME = 'id';
@@ -406,7 +408,7 @@ class EventEmitter {
     }
 }
 
-const MAX_SCROLL_DIRECTION_POOL = 10, CLEAR_SCROLL_DIRECTION_TO = 0;
+const MAX_SCROLL_DIRECTION_POOL = 8, CLEAR_SCROLL_DIRECTION_TO = 0;
 /**
  * Cache map.
  * Emits a change event on each mutation.
@@ -417,7 +419,7 @@ const MAX_SCROLL_DIRECTION_POOL = 10, CLEAR_SCROLL_DIRECTION_TO = 0;
 class CacheMap extends EventEmitter {
     _map = new Map();
     _version = 0;
-    _previouseFullHeigh = 0;
+    _previouseFullSize = 0;
     _delta = 0;
     get delta() {
         return this._delta;
@@ -430,6 +432,17 @@ class CacheMap extends EventEmitter {
     get deltaDirection() {
         return this._deltaDirection;
     }
+    _likeAChat = false;
+    set likeAChat(v) {
+        if (this._likeAChat === v) {
+            return;
+        }
+        if (v) {
+            this._scrollDirection = -1;
+        }
+        this._scrollDirectionCache = [];
+        this._likeAChat = v;
+    }
     _scrollDirectionCache = [];
     _scrollDirection = 1;
     get scrollDirection() {
@@ -499,11 +512,17 @@ class CacheMap extends EventEmitter {
 
 /**
  * Returns the removed or updated elements of a collection.
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/19.x/projects/ng-virtual-list/src/lib/utils/collection.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
  */
 const getCollectionRemovedOrUpdatedItems = (previousCollection, currentCollection) => {
-    const result = new Array();
-    if (!currentCollection || currentCollection.length === 0 || !previousCollection || previousCollection.length === 0) {
-        return (previousCollection ? [...previousCollection] : []);
+    const result = { deletedOrUpdated: new Array(), added: new Array(), notChanged: new Array() };
+    if (!currentCollection || currentCollection.length === 0) {
+        return { deletedOrUpdated: (previousCollection ? [...previousCollection] : []), added: [], notChanged: [] };
+    }
+    if (!previousCollection || previousCollection.length === 0) {
+        return { deletedOrUpdated: [], added: (currentCollection ? [...currentCollection] : []), notChanged: [] };
     }
     const collectionDict = {};
     for (let i = 0, l = currentCollection.length; i < l; i++) {
@@ -512,15 +531,25 @@ const getCollectionRemovedOrUpdatedItems = (previousCollection, currentCollectio
             collectionDict[item.id] = item;
         }
     }
+    const notChangedMap = {}, deletedOrUpdatedMap = {};
     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;
                 }
             }
-            result.push(item);
+            result.deletedOrUpdated.push(item);
+            deletedOrUpdatedMap[item.id] = item;
+        }
+    }
+    for (let i = 0, l = currentCollection.length; i < l; i++) {
+        const item = currentCollection[i];
+        if (item && !deletedOrUpdatedMap.hasOwnProperty(item.id) && !notChangedMap.hasOwnProperty(item.id)) {
+            result.added.push(item);
         }
     }
     return result;
@@ -549,6 +578,7 @@ class TrackBox extends CacheMap {
         }
         this._displayComponents = v;
     }
+    enabledBufferOptimization = false;
     constructor(trackingPropertyName) {
         super();
         this._tracker = new Tracker(trackingPropertyName);
@@ -565,6 +595,8 @@ class TrackBox extends CacheMap {
     _fireChanges = (version) => {
         this.dispatch(TRACK_BOX_CHANGE_EVENT_NAME, version);
     };
+    _isExistAddedItems = false;
+    _addedItemsMap = {};
     _previousCollection;
     _debounceChanges = debounce(this._fireChanges, 0);
     fireChange() {
@@ -578,10 +610,20 @@ class TrackBox extends CacheMap {
             console.warn('Attention! The collection must be immutable.');
             return;
         }
-        const removedOrUpdatedItems = getCollectionRemovedOrUpdatedItems(this._previousCollection, currentCollection);
-        this.clearCache(removedOrUpdatedItems);
+        const { deletedOrUpdated, added } = getCollectionRemovedOrUpdatedItems(this._previousCollection, currentCollection);
+        this.clearCache(deletedOrUpdated);
+        this.startScrollDeltaCalculationIfNeed(added);
         this._previousCollection = currentCollection;
     }
+    startScrollDeltaCalculationIfNeed(added) {
+        if (added.length > 0) {
+            this._isExistAddedItems = true;
+        }
+        for (let i = 0, l = added.length; i < l; i++) {
+            const item = added[i];
+            this._addedItemsMap[item.id] = item;
+        }
+    }
     /**
      * Clears the cache of items from the list
      */
@@ -675,10 +717,11 @@ class TrackBox extends CacheMap {
      */
     recalculateMetrics(options) {
         const { fromItemId, bounds, collection, dynamicSize, isVertical, itemSize, itemsOffset, scrollSize, snap, stickyMap } = options;
-        const { width, height } = bounds, sizeProperty = isVertical ? HEIGHT_PROP_NAME : WIDTH_PROP_NAME, size = isVertical ? height : width, totalLength = collection.length, typicalItemSize = itemSize, w = isVertical ? width : typicalItemSize, h = isVertical ? typicalItemSize : height, map = this._map, 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, leftItemsOffset = this.enabledBufferOptimization ? this.deltaDirection === 1 ? DEFAULT_ITEMS_OFFSET : itemsOffset : itemsOffset, rightItemsOffset = this.enabledBufferOptimization ? this.deltaDirection === -1 ? DEFAULT_ITEMS_OFFSET : itemsOffset : itemsOffset, checkOverscrollItemsLimit = Math.ceil(size / typicalItemSize), snippedPos = Math.floor(scrollSize), leftItemsWeights = [], isFromId = fromItemId !== undefined && (typeof fromItemId === 'number' && fromItemId > -1)
             || (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, targetDisplayItemIndex = -1, isTargetInOverscroll = false, actualScrollSize = itemByIdPos, totalSize = 0, startIndex;
-        if (dynamicSize) {
+        let itemsFromStartToScrollEnd = -1, itemsFromDisplayEndToOffsetEnd = 0, itemsFromStartToDisplayEnd = -1, leftItemLength = 0, rightItemLength = 0, leftItemsWeight = 0, rightItemsWeight = 0, leftHiddenItemsWeight = 0, totalItemsToDisplayEndWeight = 0, sizeOfAddedItems = 0, itemById = undefined, itemByIdPos = 0, targetDisplayItemIndex = -1, isTargetInOverscroll = false, actualScrollSize = itemByIdPos, totalSize = 0, startIndex;
+        // If the list is dynamic or there are new elements in the collection, then it switches to the long algorithm.
+        if (dynamicSize || this._isExistAddedItems) {
             let y = 0, stickyCollectionItem = undefined, stickyComponentSize = 0;
             for (let i = 0, l = collection.length; i < l; i++) {
                 const ii = i + 1, collectionItem = collection[i];
@@ -729,16 +772,26 @@ class TrackBox extends CacheMap {
                     if (itemById === undefined || y < itemByIdPos + size + componentSize) {
                         itemsFromStartToDisplayEnd = ii;
                         totalItemsToDisplayEndWeight += componentSize;
-                        itemsFromDisplayEndToOffsetEnd = itemsFromStartToDisplayEnd + itemsOffset;
+                        itemsFromDisplayEndToOffsetEnd = itemsFromStartToDisplayEnd + rightItemsOffset;
+                    }
+                    if (y > itemByIdPos + size + componentSize) {
+                        if (this._addedItemsMap.hasOwnProperty(collectionItem.id)) {
+                            sizeOfAddedItems += componentSize;
+                        }
                     }
                 }
                 else if (y < scrollSize + size + componentSize) {
                     itemsFromStartToDisplayEnd = ii;
                     totalItemsToDisplayEndWeight += componentSize;
-                    itemsFromDisplayEndToOffsetEnd = itemsFromStartToDisplayEnd + itemsOffset;
+                    itemsFromDisplayEndToOffsetEnd = itemsFromStartToDisplayEnd + rightItemsOffset;
                 }
-                else if (i < itemsFromDisplayEndToOffsetEnd) {
-                    rightItemsWeight += componentSize;
+                else {
+                    if (i < itemsFromDisplayEndToOffsetEnd) {
+                        rightItemsWeight += componentSize;
+                    }
+                    if (this._addedItemsMap.hasOwnProperty(collectionItem.id)) {
+                        sizeOfAddedItems += componentSize;
+                    }
                 }
                 y += componentSize;
             }
@@ -755,15 +808,17 @@ class TrackBox extends CacheMap {
                 itemsFromStartToDisplayEnd = 0;
             }
             actualScrollSize = isFromId ? itemByIdPos : scrollSize;
-            leftItemsWeights.splice(0, leftItemsWeights.length - itemsOffset);
+            leftItemsWeights.splice(0, leftItemsWeights.length - leftItemsOffset);
             leftItemsWeights.forEach(v => {
                 leftItemsWeight += v;
             });
-            leftItemLength = Math.min(itemsFromStartToScrollEnd, itemsOffset);
-            rightItemLength = itemsFromStartToDisplayEnd + itemsOffset > totalLength
-                ? totalLength - itemsFromStartToDisplayEnd : itemsOffset;
+            leftItemLength = Math.min(itemsFromStartToScrollEnd, leftItemsOffset);
+            rightItemLength = itemsFromStartToDisplayEnd + rightItemsOffset > totalLength
+                ? totalLength - itemsFromStartToDisplayEnd : rightItemsOffset;
         }
-        else {
+        else 
+        // Buffer optimization does not work on fast linear algorithm
+        {
             itemsFromStartToScrollEnd = Math.floor(scrollSize / typicalItemSize);
             itemsFromStartToDisplayEnd = Math.ceil((scrollSize + size) / typicalItemSize);
             leftItemLength = Math.min(itemsFromStartToScrollEnd, itemsOffset);
@@ -777,9 +832,12 @@ class TrackBox extends CacheMap {
             totalSize = totalLength * typicalItemSize;
         }
         startIndex = Math.min(itemsFromStartToScrollEnd - leftItemLength, totalLength > 0 ? totalLength - 1 : 0);
-        const itemsOnDisplay = totalItemsToDisplayEndWeight - leftHiddenItemsWeight, itemsOnDisplayLength = itemsFromStartToDisplayEnd - itemsFromStartToScrollEnd, startPosition = leftHiddenItemsWeight - leftItemsWeight, renderItems = itemsOnDisplayLength + leftItemLength + rightItemLength, delta = totalSize - this._previouseFullHeigh;
+        const itemsOnDisplay = totalItemsToDisplayEndWeight - leftHiddenItemsWeight, itemsOnDisplayLength = itemsFromStartToDisplayEnd - itemsFromStartToScrollEnd, startPosition = leftHiddenItemsWeight - leftItemsWeight, renderItems = itemsOnDisplayLength + leftItemLength + rightItemLength, delta = totalSize - this._previouseFullSize, scrollDelta = sizeOfAddedItems;
         if (this.scrollDirection === -1) {
-            this._delta += delta;
+            if (this._isExistAddedItems && sizeOfAddedItems > 0) {
+                this.stopScrollDeltaCalculation();
+            }
+            this._delta += delta - scrollDelta;
         }
         const metrics = {
             delta: this._delta,
@@ -801,6 +859,7 @@ class TrackBox extends CacheMap {
             rightItemLength,
             rightItemsWeight,
             scrollSize: actualScrollSize,
+            sizeOfAddedItems,
             sizeProperty,
             snap,
             snippedPos,
@@ -811,18 +870,25 @@ class TrackBox extends CacheMap {
             totalSize,
             typicalItemSize,
         };
-        this._previouseFullHeigh = totalSize;
+        this._previouseFullSize = totalSize;
         return metrics;
     }
+    _scrollDelta = 0;
+    get scrollDelta() { return this._scrollDelta; }
     clearDeltaDirection() {
         this.clearScrollDirectionCache();
     }
     clearDelta(clearDirectionDetector = false) {
         this._delta = 0;
+        this.stopScrollDeltaCalculation();
         if (clearDirectionDetector) {
             this.clearScrollDirectionCache();
         }
     }
+    stopScrollDeltaCalculation() {
+        this._isExistAddedItems = false;
+        this._addedItemsMap = {};
+    }
     generateDisplayCollection(items, stickyMap, metrics) {
         const { 
         // delta,
@@ -940,6 +1006,12 @@ class TrackBox extends CacheMap {
     untrackComponentByIdProperty(component) {
         this._tracker.untrackComponentByIdProperty(component);
     }
+    getItemBounds(id) {
+        if (this.has(id)) {
+            return this.get(id);
+        }
+        return undefined;
+    }
     cacheElements() {
         if (!this._displayComponents) {
             return;
@@ -982,6 +1054,12 @@ class TrackBox extends CacheMap {
     }
 }
 
+/**
+ * Scroll event.
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/19.x/projects/ng-virtual-list/src/lib/utils/scrollEvent.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
 class ScrollEvent {
     _direction = 1;
     get direction() { return this._direction; }
@@ -1001,7 +1079,10 @@ class ScrollEvent {
     get isEnd() { return this._isEnd; }
     _delta = 0;
     get delta() { return this._delta; }
-    constructor(direction, container, list, delta, isVertical) {
+    _scrollDelta = 0;
+    get scrollDelta() { return this._scrollDelta; }
+    constructor(params) {
+        const { direction, isVertical, container, list, delta, scrollDelta } = params;
         this._direction = direction;
         this._isVertical = isVertical;
         this._scrollSize = isVertical ? container.scrollTop : container.scrollLeft;
@@ -1010,6 +1091,7 @@ class ScrollEvent {
         this._size = isVertical ? container.offsetHeight : container.offsetWidth;
         this._isEnd = (this._scrollSize + this._size) === this._scrollWeight;
         this._delta = delta;
+        this._scrollDelta = scrollDelta;
         this._isStart = this._scrollSize === 0;
     }
 }
@@ -1060,6 +1142,16 @@ class NgVirtualListComponent {
      * Determines whether scroll positions will be snapped to the element. Default value is "false".
      */
     snapToItem = input(DEFAULT_SNAP_TO_ITEM);
+    /**
+     * 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
+     */
+    enabledBufferOptimization = input(DEFAULT_ENABLED_BUFFER_OPTIMIZATION);
+    /**
+     * If true, optimization for lists that start from the end is enabled (chat mode enabled).
+     */
+    likeAChat = input(DEFAULT_OPTIMIZE_FOR_END);
     /**
      * Rendering element template.
      */
@@ -1108,9 +1200,8 @@ class NgVirtualListComponent {
         this.clearScrollToRepeatExecutionTimeout();
         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();
+            const dynamicSize = this.dynamicSize(), delta = this._trackBox.delta, scrollSize = (this._isVertical ? container.scrollTop : container.scrollLeft);
             let actualScrollSize = scrollSize, isImmediateScroll = false;
-            this._trackBox.deltaDirection = previouseScrollSize > scrollSize ? -1 : 1;
             if (dynamicSize && delta !== 0) {
                 actualScrollSize = scrollSize + delta;
                 const params = {
@@ -1120,18 +1211,11 @@ class NgVirtualListComponent {
                 const container = this._container();
                 if (container) {
                     isImmediateScroll = true;
-                    this.scrollImmediately(container, params, () => {
-                        const event = new ScrollEvent(this._trackBox.scrollDirection, container.nativeElement, this._list().nativeElement, delta, this._isVertical);
-                        this.onScroll.emit(event);
-                    });
+                    this.scrollImmediately(container, params);
                     this._trackBox.clearDelta();
                 }
             }
             this._scrollSize.set(actualScrollSize);
-            if (!isImmediateScroll) {
-                const event = new ScrollEvent(this._trackBox.scrollDirection, container, this._list().nativeElement, delta, this._isVertical);
-                this.onScroll.emit(event);
-            }
         }
     };
     scrollImmediately(container, params, cb) {
@@ -1168,7 +1252,6 @@ class NgVirtualListComponent {
             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;
-            const event = new ScrollEvent(this._trackBox.scrollDirection, container.nativeElement, this._list().nativeElement, delta, this._isVertical);
             if (dynamicSize) {
                 actualScrollSize = scrollSize + delta;
                 if (snapToItem) {
@@ -1199,7 +1282,6 @@ class NgVirtualListComponent {
                 }
             }
             this._scrollSize.set(actualScrollSize);
-            this.onScrollEnd.emit(event);
         }
     };
     _elementRef = inject((ElementRef));
@@ -1221,6 +1303,14 @@ class NgVirtualListComponent {
         this._initialized = signal(false);
         this.$initialized = toObservable(this._initialized);
         this._trackBox.displayComponents = this._displayComponents;
+        const $enabledBufferOptimization = toObservable(this.enabledBufferOptimization);
+        $enabledBufferOptimization.pipe(takeUntilDestroyed(), tap(v => {
+            this._trackBox.enabledBufferOptimization = v;
+        })).subscribe();
+        const $likeAChat = toObservable(this.likeAChat);
+        $likeAChat.pipe(takeUntilDestroyed(), tap(v => {
+            this._trackBox.likeAChat = v;
+        })).subscribe();
         const $bounds = toObservable(this._bounds).pipe(filter(b => !!b)), $items = toObservable(this.items).pipe(map(i => !i ? [] : i)), $scrollSize = toObservable(this._scrollSize), $itemSize = toObservable(this.itemSize).pipe(map(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $itemsOffset = toObservable(this.itemsOffset).pipe(map(v => v < 0 ? DEFAULT_ITEMS_OFFSET : v)), $stickyMap = toObservable(this.stickyMap).pipe(map(v => !v ? {} : v)), $snap = toObservable(this.snap), $isVertical = toObservable(this.direction).pipe(map(v => this.getIsVertical(v || DEFAULT_DIRECTION))), $dynamicSize = toObservable(this.dynamicSize), $cacheVersion = this.$cacheVersion;
         $isVertical.pipe(takeUntilDestroyed(), tap(v => {
             this._isVertical = v;
@@ -1315,6 +1405,12 @@ class NgVirtualListComponent {
             l.nativeElement.style[isVertical ? HEIGHT_PROP_NAME : WIDTH_PROP_NAME] = `${totalSize}${PX}`;
         }
     }
+    /**
+     * Returns the bounds of an element with a given id
+     */
+    getItemBounds(id) {
+        return this._trackBox.getItemBounds(id);
+    }
     /**
      * The method scrolls the list to the element with the given id and returns the value of the scrolled area.
      * Behavior accepts the values ​​"auto", "instant" and "smooth".
@@ -1364,8 +1460,6 @@ class NgVirtualListComponent {
                             }
                             else {
                                 this._scrollSize.set(scrollSize);
-                                const event = new ScrollEvent(this._trackBox.scrollDirection, container.nativeElement, this._list().nativeElement, this._trackBox.delta, this._isVertical);
-                                this.onScroll.emit(event);
                                 container.nativeElement.addEventListener(SCROLL, this._onScrollHandler);
                                 container.nativeElement.addEventListener(SCROLL_END, this._onScrollEndHandler);
                             }
@@ -1386,9 +1480,37 @@ class NgVirtualListComponent {
         const items = this.items(), latItem = items[items.length > 0 ? items.length - 1 : 0];
         this.scrollTo(latItem.id, behavior);
     }
+    _onContainerScrollHandler = (e) => {
+        const containerEl = this._container();
+        if (containerEl) {
+            const scrollSize = (this._isVertical ? containerEl.nativeElement.scrollTop : containerEl.nativeElement.scrollLeft), offsetSize = (this._isVertical ? containerEl.nativeElement.offsetHeight : containerEl.nativeElement.offsetWidth), listSize = (this._isVertical ? this._list()?.nativeElement.offsetHeight ?? 0 : this._list()?.nativeElement.offsetLeft ?? 0);
+            this._trackBox.deltaDirection = this._scrollSize() >= scrollSize ? -1 : this.likeAChat() && (scrollSize + offsetSize) >= listSize ? -1 : 1;
+            const event = new ScrollEvent({
+                direction: this._trackBox.scrollDirection, container: containerEl.nativeElement,
+                list: this._list().nativeElement, delta: this._trackBox.delta,
+                scrollDelta: this._trackBox.scrollDelta, isVertical: this._isVertical,
+            });
+            this.onScroll.emit(event);
+        }
+    };
+    _onContainerScrollEndHandler = (e) => {
+        this._trackBox.deltaDirection = this.likeAChat() ? -1 : 1;
+        const containerEl = this._container();
+        if (containerEl) {
+            const event = new ScrollEvent({
+                direction: this._trackBox.scrollDirection, container: containerEl.nativeElement,
+                list: this._list().nativeElement, delta: this._trackBox.delta,
+                scrollDelta: this._trackBox.scrollDelta, isVertical: this._isVertical,
+            });
+            this.onScrollEnd.emit(event);
+        }
+    };
     ngAfterViewInit() {
         const containerEl = this._container();
         if (containerEl) {
+            // for direction calculation
+            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);
@@ -1405,6 +1527,8 @@ class NgVirtualListComponent {
         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._resizeObserver) {
                 this._resizeObserver.unobserve(containerEl.nativeElement);
             }
@@ -1417,7 +1541,7 @@ class NgVirtualListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgVirtualListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.14", 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 }, 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: "19.2.14", 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 }, likeAChat: { classPropertyName: "likeAChat", publicName: "likeAChat", 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgVirtualListComponent, decorators: [{
             type: Component,